Why Does Box-Sizing: Border-Box Still Show the Border with a Width of 0Px

Why does box-sizing: border-box still show the border with a width of 0px?

The content area is anything left after you subtract the width of the border.

The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified ‘width’
and ‘height’ properties.

Specified width = 10 px

border width = 10 px

Content width = Specified width (10 px) - border width (10 px)

Content width 10 - 10 = 0

Specified width = 0 px

border width = 10 px

Content width = Specified width (0 px) - border width (10 px)

Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

As the content width and height cannot be negative ([CSS21], section
10.2), this computation is floored at 0.

Specified width = 0 px

border width = 10 px

Content width = Specified width (0 px) - border width (10 px)

Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.

box-sizing:border-box with width padding

if you add a height to the elements you will see they are all the same.

div, span, input {

  display: block;

  box-sizing: border-box;

  width: 0;

  padding: 0 10px;

  border: solid green;

  border-width: 0 5px 0 5px;

  background: #ebebeb;

  height: 20px;

}

<div></div>

<br>

<span></span>

<br>

<input>

Why box-sizing is not working with width/height attribute on canvas element?

As a guess, I'd say it was this paragraph from the spec.

When its canvas context mode is none, a canvas element has no rendering context, and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value of the element’s width attribute and an intrinsic height equal to the numeric value of the element’s height attribute, those values being interpreted in CSS pixels, and being updated as the attributes are set, changed, or removed.

That is the bitmap must be taken from the height and width attributes. Box-sizing plays no part.

Note also that the HTML5 rendering section says that:

The width and height attributes on embed, iframe, img, object or video elements, and input elements with a type attribute in the Image Button state and that either represents an image or that the user expects will eventually represent an image, map to the dimension properties width and height on the element respectively.

Canvas is not mentioned there.

box-sizing: border-box with no declared height/width

TL;DR

An idea is to keep border for both. Instead of none simply make the color transparent so that the size (including border + padding) will always be the same for both.

div.test {

  background-color: red;

  box-sizing: border-box;

  display: inline-block;

  border: 5px solid;

  text-align: center;

  padding: 50px;

}

div.test:first-of-type {

  border-color: transparent;

}

<div class="test">aa</div>

<div class="test">aa</div>

Why doesn’t height: 0 hide my padded div , even with box-sizing: border-box?

The exact definition of border-box is:

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

So you can modify the height and width properties, but padding and border never change.

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Then, if height is 0, you can't make the padding be inside, because that implies the height will be negative.

border-box with padding can't have 0 width

According to the spec,

The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified width
and height properties. As the content width and height cannot be
negative ([CSS21], section 10.2), this computation is floored at 0.

Therefore, your element effectively has a height and a width of 0. But you see it bigger because of the padding and the border.

Is there a LI equivalent for box-sizing: border-box?

When working with divs, you can use box-sizing:border-box to get the
borders inside the div.

To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.

But how can you offset the border on a LI item

You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)

body {

  background: lightgray;

}

nav ul li {

  position: relative;

  float: left;

  padding: 0 5px;

  list-style-type: none;

}

nav ul li.active::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: -6px;

  background-color: white;

  border-bottom: solid 6px blue;

  z-index: -1;

}

/*  or one can use linear-gradient  */

nav ul li:hover {

  background: linear-gradient(

    to bottom, white calc(100% - 5px), blue 5px

  ) no-repeat left bottom;

}

<nav>

  <ul>

    <li>

      Some text

    </li>

    <li>

      Some text

    </li>

    <li class="active">

      Some text

    </li>

    <li>

      Some text

    </li>

  </ul>

</nav>

---

Related Topics