Is this the expected behaviour of box-sizing: "border-box"?

Question

I have the following div and buttons

<div class="sc-fzqBZW fNBJAV">
  <button class="sc-fzokOt eEeKDq">Cancel</button>
  <button class="sc-fzokOt eEeKDq">Continue</button>
</div>

the css for the div is as follows

box-sizing: "border-box"

and for the buttons is

width: "50%";
padding: "10px";
margin: "5px";

however, the buttons break onto the next line due to the margin added. I thought border-box would solve this but I don't know why it's not. What am I missing here?

Yes. Margin is never part of the box model. It's considered external to the element. — Terry, Apr 15 '20 at 08:38

score 3 · Accepted Answer · answered Apr 15 '20 at 08:23

See MDN:

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

It doesn't put margins inside the box.

Consider flexbox instead.

div {
  display: flex;
}

button {
  flex: 1 1 auto;
  margin: 5px;
}

<div>
  <button>Cancel</button>
  <button>Continue</button>
</div>

sure. I have seen the MDN and it makes sense. Your solution also works. Thank you. — Esir Kings, Apr 15 '20 at 08:32

Is this the expected behaviour of box-sizing: "border-box"?

1 Answers1