How many type of "Box Model" CSS have?
+3
A:
As far as I know there is only one type of CSS box model. Early versions of Internet Explorer did have a bug where the padding and border were included in the total width, but it was still the same box model.
APShredder
2010-07-31 03:57:03
@APShredder - Ok then is there any differences between `display:block` and `display:inline-block` box model?
metal-gear-solid
2010-07-31 04:01:30
@metal-gear-solid Neither of those change the box model. They change the flow of the elements.
Justin Niessner
2010-07-31 04:03:53
@metal-gear-solid - You're confusing yourself with the visual formatting model: http://www.w3.org/TR/CSS2/visuren.html
Gert G
2010-07-31 04:08:28
-1: Actually, CSS has 2 box-models. Please see `box-sizing`.
Andrew Moore
2010-07-31 04:39:06
+3
A:
CSS3 has two box-models. content-box and border-box. content-box is the default.
content-box
content-box is the default CSS box-model since CSS version 1. When using content-box, only the content of the box is taken in effect when calculating the width of the box. In the reference below, content-box is referred to as the W3C box model.
border-box
border-box is the ported version of the Microsoft box model. In Internet Explorer 5 and below (IE6 in Quirks mode), IE considered the width of the element as being the combined width of the border, padding and content area of the box. In the reference below, border-box is referred to as the W3C box model.
No element uses the border-box box model unless specified via the box-sizing property, as such:
box-sizing: border-box;
Reference Image
Andrew Moore
2010-07-31 04:25:40