Grokking CSS for Web Development
Vote

0% completed

​

Understanding box-sizing

One declaration, box-sizing: border-box, makes the card from the previous lesson exactly as wide as its width says: 300 pixels on screen instead of 340. The box-sizing property tells the browser which part of the box the width and height properties measure.

It has two values:

  • content-box, the default, makes width and height measure the content area only. Padding and border are added outside them.
  • border-box makes width and height measure the content, padding and border together. The browser subtracts the padding and border to find the content size.

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content