CODEWITHSUNDEEP
htmlcssfrontend
Rishabh
Rishabh

Reputation: 21

display:block-inline not working properly

I have set the width of colums to 25% but still the boxes are not appearing in a single line:

image link

Upvotes: 2

Views: 73

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

I see you have a right border like 1px, by default, your width does not count that as width, therefore, your true width is 25% + 1px. That's why one row only fit 3 boxes.

You need to add: box-sizing: border-box; so the 25% width count border as well, then your true width for each box is 25% now. Fit 4 in one row.

box-sizing

REF: https://developer.mozilla.org/en/docs/Web/CSS/box-sizing?v=example

Example:

span {
  width: 25%;
  display: inline-block;
  border-right: 1px solid red;
  background: lightgray;
}


.test2 span {
  width: 25%;
  display: inline-block;
  border-right: 1px solid red;
  background: lightgray;
  box-sizing: border-box;
}
<div class="test1">
<span>111</span><span>222</span><span>333</span><span>444</span>
</div>

<br><br>

<div class="test2">
<span>111</span><span>222</span><span>333</span><span>444</span>
</div>

Upvotes: 5

Related Questions