CSS display: inline vs inline-block
Inline elements:
- respect left & right margins and padding, but not top & bottom
- cannot have a width and height set
- allow other elements to sit to their left and right.
- see very important side notes on this here.
Block elements:
- respect all of those
- force a line break after the block element
- acquires full-width if width not defined
Inline-block elements:
- allow other elements to sit to their left and right
- respect top & bottom margins and padding
- respect height and width
From W3Schools:
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
When you visualize this, it looks like this:
The image is taken from this page, which also talks some more about this subject.
What is the difference between display: inline and display: inline-block?
A visual answer
Imagine a <span>
element inside a <div>
. If you give the <span>
element a height of 100px and a red border for example, it will look like this with
display: inline
display: inline-block
display: block
Code: http://jsfiddle.net/Mta2b/
Elements with display:inline-block
are like display:inline
elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
Difference of supported styles as summary:
- inline: only
margin-left
,margin-right
,padding-left
,padding-right
- inline-block:
margin
,padding
,height
,width
display:inline vs display:block
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
pseudo-elements display: block vs display: inline
Then use display: inline-block
Elements with display: inline
can't have explicit dimensions set on them - it will have no effect. And so, because the pseudo element has no non-empty content, it will appear with 0 dimensions and thus invisible.
Inline-block vs inline elements in terms of line-breaks
The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.
display: inline vs inline-block vs block for non-nav elements
You want to give your container that is holding your elements text-align:center;
You're then going to want to give your inside elements: display:inline-block;
Here's an example I whipped up for you.
HTML:
<div id="container">
<div class="element">
<p>Basecamp</p>
<img src="http://lorempixel.com/100/100/"/>
<p>Lorum Ipsum Pixel</p>
</div>
<div class="element">
<p>Basecamp</p>
<img src="http://lorempixel.com/100/100/"/>
<p>Lorum Ipsum Pixel</p>
</div>
<div class="element">
<p>Basecamp</p>
<img src="http://lorempixel.com/100/100/"/>
<p>Lorum Ipsum Pixel</p>
</div>
</div>
CSS:
#container{width:600px;height:1000px;background-color:blue;text-align:center;}
.element{width:150px;height:300px;background-color:red;display:inline-block;margin-top:50px}
Update: added images.
Why inline and inline-block have different height with the same text content
This is related to how line-height
works and how the height of each element is calculated.
Let's start with a trivial example to highlight the effect of line-height
span {
border:1px solid red;
padding:5px;
line-height:50px;
}
<span>some text</span> <span style="display:inline-block">some text</span>
What is the difference between display: inline-block and float: left
The purpose of float is to allow text to wrap around it. So it's moved to the left or right side and taken out of the page flow. Line boxes containing the other text then avoid overlapping with the floated element. It forms a block-level, block container. It is not vertically aligned with any other content.
body { width:300px; }.float-example span { float:left; width: 100px; border:2px dashed red;}
<section class="float-example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span>I like to use float!</span> sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>
Related Topics
How to Set the Width of Select Box Options
How to Override Vuetify Styles
Why Does Height 100% Work When Doctype Is Removed
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Bootstrap Navbar With Left, Center or Right Aligned Items
Remove White Space Below Image
Css - Why Doesn't Percentage Height Work
Css3 Gradient Background Set on Body Doesn't Stretch But Instead Repeats
Difference Between @Import and Link in Css
Left Aligned Last Row in Centered Grid of Elements
How to Change the Symbol When Click in CSS
How to Change Angular Material Table Row Height
Footer At Bottom of Page or Content, Whichever Is Lower
Align Inline-Block Divs to Top of Container Element
What Does the CSS Rule "Clear: Both" Do
How to Make Background-Size Work in Ie