Menu
I'm doing some tests on float and inline-block and i've noticed there is a difference between them.
As you can see from THIS EXAMPLE, that if I use display:inline-block the divs have a little margin between them but if I use float:left it works as expected.
Please note that i'm using Eric Meyer's Reset CSS v2.0.
Is it because I'm doing something wrong or is this the way inline-block behaves (in that case it is not very reliable).
HTML
<!DOCTYPE html>
<html>
<head>
<title>How padding/margin affect floats</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
CSS (without reset)
#wrap{
width: 600px;
margin:auto;
}
.square{
width: 200px;
height: 200px;
background: red;
margin-bottom: 10px;
/*display: inline-block;*/
float:left;
}
574
Differences: Display:inline-block puts a particular space between two Display:inline-block elements, if not written continually. ^1 Whereas Float never put any space between two elements of its kind. Float floats elements to left with float:left and to right with float:right.
Is CSS float deprecated? In a word: no. The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag. For example, widening the screen would cause more elements to fit on the top line, so they would jump up.
Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
I'm doing some tests on float and inline-block and i've noticed there is a difference between them.
Whatever resource gave you the implication that they might not be the same is misleading. They are completely different things.
the divs have a little margin between them
That's not a margin. That's a space resulting from the line-breaks between the divs in the HTML. One solution would be to just remove the line-breaks, another would be to set font-size: 0 on the containing element (thus causing the spaces not to be rendered).
Note that if you use the second method, you'll need to set another font-size on the inner divs, otherwise the text inside them won't be rendered.
Hope that helps!
140
It is because of spaces. If you set font-size: 0 on the container element the gaps will go away(make sure to reset the font-size on the inline-blocks).
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
