Why html elements still have offsets in my code?

Question

I set margin and padding of my div and body elements to 0 but I see some offset between my divs exist still. Also I use inline blocks.

This is my example:

.background{
    padding:0;
    margin:0;
    background-color: yellow;
}
.page{
    background-color: darkolivegreen;
    width:80%;
    padding:0;
    margin:0;
}

.title-boss-offset{
    background-color: antiquewhite;
    width:70%;
}

.title-boss {
    width: 29%;
    background-color: aqua;
}

.title-boss-offset, .title-boss{
    border-width:0;
    display:inline-block;
    margin:0;
    padding:0;
    height: 15em;
}

<body class="background">
<div class="page">
    <div class="title-boss-offset"></div>
    <div class="title-boss"></div>
</div>
</body>

Why does it happen? How can I fix it?

you have spaces between your elements – n00dl3 Jun 14 '17 at 11:33 — n00dl3, Jun 14 '17 at 11:33

n00dl3 · Accepted Answer · 2017-06-14T12:09:07.320

Please be sure to remove the spaces between the elements when you use display: inline-block. Or see the pure CSS solution.

Stripping spaces

But this will not (note that I added a line-height:0 to the parent to get rid of the bottom margin) :

.background{
    padding:0;
    margin:0;
    background-color: yellow;
}
.page{
    background-color: darkolivegreen;
    width:80%;
    padding:0;
    margin:0;
    line-height:0;
}

.title-boss-offset{
    background-color: antiquewhite;
    width:70%;
}

.title-boss {
    width: 30%;
    background-color: aqua;
}

.title-boss-offset, .title-boss{
    border-width:0;
    display:inline-block;
    margin:0;
    padding:0;
    height: 15em;
    word-spacing: normal
    
}

<body class="background">
  <div class="page">
    <div class="title-boss-offset"></div><!--
    --><div class="title-boss"></div>
  </div>
</body>

Pure CSS:

You cantake advantage of the table display that strip spaces between cells, by setting the parent style to display: table; important parts are :

.parent{
  display: table; 
  width: 100%; 
  table-layout: fixed; 
  line-height: 0;
  word-spacing: -2em; /*cross-browser quirks*/
}
.children{
  display: inline-block; 
  word-spacing: normal; /*cross-browser quirks*/
}

.background{
    padding:0;
    margin:0;
    background-color: yellow;
}
.page{
    background-color: darkolivegreen;
    width:80%;
    padding:0;
    margin:0;
    display:table;
    table-layout:fixed;
    word-spacing: -2em;
    line-height:0;
}

.title-boss-offset{
    background-color: antiquewhite;
    width:70%;
}

.title-boss {
    width: 30%;
    background-color: aqua;
}

.title-boss-offset, .title-boss{
    border-width:0;
    display:inline-block;
    margin:0;
    padding:0;
    height: 15em;
    word-spacing: normal
    
}

<body class="background">
  <div class="page">
    <div class="title-boss-offset"></div>
    <div class="title-boss"></div>
  </div>
</body>

score 1 · Answer 2 · answered Jun 14 '17 at 11:34

It's because you use the inline-block property, browsers automatically add some space between it. Read here for more info about it.

You could easily fix it, for example by adding a float:

.title-boss-offset, .title-boss {
  /* other props */
  float: left;
}

score 0 · Answer 3 · answered Jun 14 '17 at 11:41

It is due to the white-space and line break in your HTML markup which causes this issue. There are two options to resolve the "problem":

remove the line breaks and white-space from your code
set the font-size of the parent element to '0'

try using code as single line. It wont show event you set width 70%,30% of yours elements Or use float property

score 0 · Answer 4 · answered Jun 14 '17 at 11:42

It's due to the linebreaks between the ìnline-block` elements, which causes those spaces.

One way to prevent those is the move the closing tag of such an element down into the next line and put the next opening tag directly after it in the same line, like this in your example:

<body class="background">
  <div class="page">
    <div class="title-boss-offset">
    </div><div class="title-boss">
  </div></div>
</body>

https://jsfiddle.net/7voowbf7/1/

Why html elements still have offsets in my code?

4 Answers4

Stripping spaces

Pure CSS: