CSS Width Issue for inline block elements

Question

In this fiddle example , https://jsfiddle.net/atmgtm/jjurk9jv/ I have trying to create a carousal , with arrows (vertically centered) at both left and right. The total width of the carousal is 300px. The way I center the arrows vertically is using the idea mentioned in the question How to vertically align an image inside div. I have managed to successfully center the two arrows , but have some unexpected(my lack of understanding) problems with placing the arrows horizontally.

When I change the width of arrow-block from 296 to 297 , it is rendered below.This baffles me because the width of the arrow-block is less than 300 and should be rendered within the carousal.

    /* line 19, ../scss/carousal.scss */
    .carousal .arrow-block {
      display: inline-block;
      vertical-align: middle;
      height: 30px;
      width: 296px;
    }

I notice that when the arrow block is rendered(when width is less than 296 px) inside the carousal, there is some space between the left border of the carousal and the arrow block , even though I did not add padding or margin.

Answer 1

Please go through below code, hope this will help you.

/* line 14, ../scss/carousal.scss */
.carousal {
  width: 300px;
  height: 300px;
  background: #ccc;
  box-sizing: content-box;
  z-index: -1;
}
/* line 20, ../scss/carousal.scss */
.carousal .inline-block {
  height: 100%;
    display: table;
    vertical-align: middle;
}
/* line 21, ../scss/carousal.scss */
.carousal .arrow-block {
  display: table-cell;
    vertical-align: middle;
    height: 20px;
    width: 300px;
}
/* line 28, ../scss/carousal.scss */
.carousal .arrow {
      
}
/* line 29, ../scss/carousal.scss */
.carousal .clear {
  float: none;
}
/* line 30, ../scss/carousal.scss */
.carousal .left {
  float: left;
}
/* line 31, ../scss/carousal.scss */
.carousal .right {
  float: right;
}

/* line 2, ../scss/main.scss */
body {
  width: 90%;
  margin: auto;
}

    <div class="carousal">
        <div class="inline-block">
          <div class="arrow-block">
              <div class="arrow left"> < </div>
              <div class="arrow right"> > </div>
          </div>
        </div>
    </div>