Home/ Questions/Q 8897451
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:20:52+00:00

I’m doing some tests on float and inline-block and i’ve noticed there is a

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give the parent element font-size: 0;.

    Then, set the font-size of the children to font-size: 12px (or whatever size your design dictates), like this:

    #wrap{
    font-size:0;
}
.square{
    font-size:12px;
}
    • 0