Pixel width in CSS required is 10px longer than I expected. Why?

Question

I'm trying to create four gray squares that display in the middle of the browser.

Each square is set to be 40 pixels wide and have borders of 10 pixels.

I use the box_container class in a <div> to allow some CSS to center the four boxes.

If I set the width of the box_container class to 240px, only 3 boxes fit into the first row.

I need to set the width to 250px minimum to get all the four boxes to display in one row. Why is this when the eight borders of 10px and four img boxes of 40px adds up to 240px (10px*8 + 40px*40 = 240px)?

<style type="text/css">

.boxes {
 height: 40px;
 width: 40px;
 background-color: gray;
 margin: 10px 10px 10px 10px;
}

.box_container {
 width: 250px;
 margin: 0 auto;
}
</style>

 <div class="box_container">
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
 </div>

kojow7 · Answer 1 · 2016-02-13T05:57:34.693

It is because there are spaces between your image tags. There isn't a nice solution, but here are a few ways you can solve it:

Using no spaces:

<div class="box_container"><img class="boxes"><img class="boxes"><img class="boxes"><img class="boxes"></div>

Or using empty comments:

<div class="box_container"><!--
    --><img class="boxes"><--
    --><img class="boxes"><--
    --><img class="boxes"><--
    --><img class="boxes"><--
--></div>

Another option that might work in your case is to set the images to float:

.boxes {
    height: 40px;
    width: 40px;
    background-color: gray;
    margin: 10px 10px 10px 10px;
    float: left
}

*Also, if you are not using xhtml, you should not have a closing </img> tag. I have removed them in the above examples as your tag says you are using html. Technically, I'm not 100% sure why you are using images in the first place since you just want grey boxes. I would recommend using divs displayed as an inline block like this:

.boxes {
  height: 40px;
  width: 40px;
  background-color: gray;
  margin: 10px 10px 10px 10px;
  display: inline-block;
  float: left
}
.box_container {
  width: 250px;
  margin: 0 auto;
}

<div class="box_container">
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
  <div class="boxes"></div>
</div>

If using floats, do not forget to clearfix the parent. Another option would be to use `font-size: 0` on parent and `font-size: 1rem` on children. Also there is no such thing as ``. — Farzad Yousefzadeh, Feb 13 '16 at 05:20

Munawir · Answer 2 · 2016-02-13T05:52:50.533

0

Use float:left in .boxes class

.boxes {
 height: 40px;
 width: 40px;
 background-color: gray;
 margin: 10px 10px 10px 10px;
        float: left;
}

.box_container {
 width: 250px;
 margin: 0 auto;
}

 <div class="box_container">
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
 </div>

edited Feb 13 '16 at 05:52

answered Feb 13 '16 at 05:22

Munawir

3,346
9
33
51

score 0 · Answer 3 · answered Feb 13 '16 at 05:33

Your calculation does not exactly work out that way. There is whitespace between each <img> tag, and this possibly causes it to overflow out of the container.

You may remove this whitespace by making them float: left in your css.

The resulting code displays the four boxes in the same line:

<style type="text/css">

.boxes {
 height: 40px;
 width: 40px;
 background-color: gray;
 margin: 10px 10px 10px 10px;
        float: left
}

.box_container {
 width: 250px;
 margin: 0 auto;
}
</style>

 <div class="box_container">
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
  <img class="boxes"></img>
 </div>

Pixel width in CSS required is 10px longer than I expected. Why?

3 Answers3