This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 1 year ago.
I have an element that takes 100% of its container's width:
How do I make it so the width of the element is as wide as the text?
I can't find the answer online because I don't know how to formulate the question proprely.
float: left; works but it messes up the surrounding elements as some of them have this porperty as well. Is there another way?
You can set the display: inline-block OR display: inline (depends on your use case) for the element containing the text like so :
.text {
display: inline;
padding: 10px;
background: firebrick;
}
<div class="text">text</div>
<div class="text">text text text</div>
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
I have a set of divs and want the children to be right aligned:
.parent {
width: 150px;
border: solid;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="parent">
<div class="icon">x
</div>
<div>Toooooooo looooooooong</div>
</div>
When the text breaks in a newline, it still occupies all the space, so it's not at the right. I could use width: min-length, but then all the short texts with spaces break in a new line, and I want it only for the long ones.
Here's the example in CodePen: https://codepen.io/rveciana/pen/eYpyKJX
This question already has answers here:
Vertical-align aligns everything else except self
(2 answers)
How does the vertical-align property work?
(2 answers)
inline-box with image vertical-align:middle with parent box
(1 answer)
Closed 3 years ago.
I have an inline-block element inside a div that I need vertically aligned in the middle. However, the attribute doesn't work as expected and is always a little pushed down. This fiddle demonstrates the problem https://jsfiddle.net/e4spxubf/
I have tried setting the height and line-height of both the child parent elements to the same 14px.
<div style="
height: 14px;
line-height: 14px;
background-color: red;
"><span icon="eye-open" style="
vertical-align: middle;
background-color: aquamarine;
height: 14px;
width:14px;
display: inline-block;
"></span></div>
I expect that the blue box will be perfectly vertically centered in the parent.
The div is aligning itself with the baseline of the span. When you set vertical-align: baseline, you'll find the span now aligns itself with the baseline, too.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}
<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>
I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
This question already has answers here:
Two inline-block, width 50% elements wrap to second line [duplicate]
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Ignore whitespace in HTML [duplicate]
(12 answers)
Closed 4 years ago.
I simply want to add two pictures in a row.
I use display: inline-block; which means my images should go in a row because when I say inline-block; they aren't block elements therefore a newline won't be added after the image is rendered. Makes sense, right?!
However it doesn't work.
body {
padding: 0;
margin: 0;
}
img {
display: inline-block;
width: 30vw;
margin-left: 10vw;
margin-right: 10vw;
}
<body>
<div>
<img src="http://www.gaiawellnessretreat.com/sites/default/files/field/image/portfolio_8.jpg">
<img src="http://www.gaiawellnessretreat.com/sites/default/files/field/image/portfolio_8.jpg">
</div>
</body>
EDIT: This is NOT a duplicate and it is NOT solved.
Adding a hack like font-size: 0 in div does not solve it.
This question already has answers here:
inline-block boxes not fitting in their container [duplicate]
(2 answers)
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 5 years ago.
I've these four div tags arranged in 2x2 grid (middle one only for line break)
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class=""></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
Along with this css:
.rectangle {
width: 25px;
height: 25px;
background: #ccc;
display: inline-block;
margin: 0px; /* doesn't work */
padding: 0px; /* doesn't work */
}
JSFiddle result output shows gaps between the rectangles. Is there a way to get rid of the gaps?
http://jsfiddle.net/brMPs/958/
You could either float the rectangles left or zero out the font size for the hidden spaces between the DIV tags. Here, try this adding a container div and using
.container {
font-size: 0;
}
http://jsfiddle.net/brMPs/963/
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<div class="rectangle"></div><div
class="rectangle">
</div>
<div class=""></div>
<div class="rectangle"></div><div
class="rectangle">
</div>
https://css-tricks.com/fighting-the-space-between-inline-block-elements/