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
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.
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
Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?
An answer by @thirtydot might help you... Question's link
I just found out that floating an
element will also make it a block,
therefore specifying afloat
property
anddisplay:block
is redundant.
Yes, display: block
is redundant if you've specified float: left
(or right
).
(What would happen if you tried to
specify display:inline and float:left?
)
display: inline
will not make any difference, because setting float: left
forces display: block
"no matter what":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float
= display: block
.
However, your specific example of float: left; display: inline
is useful in one way - it fixes an IE6 bug.
Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,
Some examples:
- If you set
position: absolute
, thenfloat: none
is forced. - The
top
,right
,bottom
,left
properties will not have any effect unlessposition
has been set to a value other than the default ofstatic
.
Is there a tool that can check for
such things?
I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.
Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not?
To understand this you need to know the difference between a BFC (block formatting context) and IFC (inline formating context.
When having only block elements inside your container this one will create a BFC:
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In this case, only the height and margin of the block element inside are considered to calculate the height of your container and you only have one empty element so the height is 0.
When having an inline-block
/inline
elements you will trigger the creation of an IFC and the story is different:
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
The height of a line box is determined by the rules given in the section on line height calculations.
As you discovered, we will be dealing with line boxes and line-height
will be considered here to define the height of each line box (in your case you have only one)
Now, the difference between the inline
and inline-block
is about white space. In the case of inline
element you will end having an empty container because all the white space will collapse. More details here: https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#white-space-prop.
If you change the white space algorithm (and you add a space) you will get the same height as with the inline-block
element.
.container {
background-color: red;
margin:5px;
white-space:pre;
}
<div class="container"><div style="display: inline-block;"></div></div>
<div class="container"><div style="display: inline;"> </div></div>
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.
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
What Is the Way to Add Horizontal Scroll on Material-Ui Table With Many Columns
How to Scale an Image Proportionally Within a Table Cell of a Fixed Size
Change a Html5 Input'S Placeholder Color With Css
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
What Are the Differences Between Flex-Basis and Width
What's So Bad About In-Line Css
When to Use Margin VS Padding in Css
Css Background-Image - What Is the Correct Usage
Should I Use Max-Device-Width or Max-Width
Left Aligned Last Row in Centered Grid of Elements
Family Tree With Pure HTML and CSS (Or With Minimal Js)
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
Font Awesome Not Working, Icons Showing as Squares
Click Through Div to Underlying Elements
Border Gradient With Border Radius