why is 100% width not 100% in css box modell?

Question

Imagine the following example on that issue:

HTML:

<div id="wrapper">
  <div class="col">col1</div>
  <div class="col">col2</div>
  <div class="col">col3</div>
  <div class="col">col4</div>
</div>

CSS:

body, html {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0;
  padding: 0;
}

.col {
  width: 25%;
  display: inline-block;
}

These inner divs should be all in the same line, but they aren't. I mean 4 * 25% = 100%, right?

Read more about this here http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Nenad Vracar, May 08 '17 at 11:25

score 4 · Accepted Answer · answered May 08 '17 at 11:24

4

This is because of the whitespace and line breaks in your HTML.

body, html {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0;
  padding: 0;
}

.col {
  width: 25%;
  display: inline-block;
}

<div id="wrapper"><div class="col">col1</div><div class="col">col2</div><div class="col">col3</div><div class="col">col4</div></div>

answered May 08 '17 at 11:24

Huelfe

Correct! but why should this affect the width while it's not rendered ? – Mhd Alaa Alhaj May 08 '17 at 11:31
The whitespaces for example are also inline and have a width. The browser handle these spaces like normal spaces between words. So your calculated width is greater than 100%. – Huelfe May 08 '17 at 11:37
Thank you dear! It's the first time I know that. – Mhd Alaa Alhaj May 08 '17 at 11:41
1

strangely, that solved my issue. The wihtespace(s) was the problem. If you would like to keep formatting, then `font-size: 0` to `wrapper` does the trick, too. – alpham8 May 08 '17 at 11:41

1 Answers1