0

Could you explain me how height and width is calculated with and without styling? I can't understand this, with and without styling. Thanks!

davychhouk
  • 1,549
  • 2
  • 16
  • 20
  • Without styling, elements will generally grow to fit their contents. With styling, they'll behave however you tell them to. – Tyler Roper Oct 07 '16 at 02:40
  • 1
    Browsers [have default style sheets](http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements). – steveax Oct 07 '16 at 05:02

1 Answers1

2

It depends on how your box-sizing (CSS property) is set up for that specific element. Box-sizing has two possible values: content-box and border-box.

content-box With content-box your width/height, with styles applied, excludes the padding, content and border. This means if you have an element with a width of 20px and a left-padding of 10px, the total width would be 30px;

border-box With border-box, your width/height includes the padding, content and border. In the example above, your total width would be 20px as the padding is now included in the width. This allows you to specify more accurate widths and heights within your CSS. Note that margins are always outside of any width/height you define.

The browser default is content-box, although these days most people override that with:

* { box-sizing: border-box; }
SpareWalrus
  • 156
  • 1
  • 4