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
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
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.
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.
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.
What's the difference between display:inline-flex and display:flex?
display: inline-flex
does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex
and display: flex
. A similar comparison can be made between display: inline-block
and display: block
, and pretty much any other display type that has an inline counterpart.1
There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.
It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline
and/or display: inline-block
), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).
1 The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex
unless you have a very good reason to display your flex container inline.
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>
What is the difference between inline-block and inline-table?
display:table
will make your tag behave like a table.inline-table
just means that the element is displayed as an inline-level table. You can then do table-cell
to let your element behave like a <td>
element.
display:inline
- displays your element as an inline element (like <span>
), and inline-block
will just group them together in a block container.
As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell
with inline-table
and not with inline-block
).
Check this link for more info on display
.
Odd behavior - img display:block vs img display:inline-block
Block element forces a line break and takes the full width of its parent element. It does not allow other elements to come to their left and right.
Use display:inline-block;
on your a tag and display:block;
on your img
. So that there will be no issue of page not rendering with extra blank pixels under images.
and your whole div won't become a link.
EDIT: Add vertical-align:bottom;
to the a tag. As suggested by Oriol
.image_holder { margin:20px 0px; background-color: aquamarine;}.image_holder a{ display:inline-block; vertical-align:bottom;}.image_holder img{ display:block;}
.image_holder2 { margin:20px 0px; background-color: aquamarine;}
.image_holder2 img { display: inline-block;}
<div class="image_holder"> <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a></div>
<div class="image_holder2"> <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a></div>
Related Topics
What Is the Best CSS Framework and Are They Worth the Effort
Why Does 'Overflow:Hidden' Prevent 'Position:Sticky' from Working
Why Does .Foo A:Link, .Foo A:Visited {} Selector Override A:Hover, A:Active {} Selector in Css
How to Delay a :Hover Effect in Css
How to Make Internet Explorer 8 to Support Nth Child() CSS Element
How to Include One CSS File in Another
How to Create Multi-Color Border With Css
Should I Use 'Border: None' or 'Border: 0'
How to Make Round Corners to Both Inside of a Box and Its Border
How Does #Iefix Solve Web Fonts Loading in IE6-IE8
CSS Transition with Linear Gradient
Chrome Developer Tools: How to Find Out What Is Overriding a CSS Rule
<Input> Doesn't Inherit the Font from <Body>
How to Make an Inline-Block Element Fill the Remainder of the Line