HTML and CSS Reference
In-Depth Information
The box model is without question one of the more confusing parts of HTML and CSS. We
set a width property value of 400 pixels, but the actual width of our element is 492 pixels.
By default the box model is additive; thus to determine the actual size of a box we need to
take into account padding, borders, and margins for all four sides of the box. Our width not
only includes the width property value, but also the size of the left and right padding, left
and right borders, and left and right margins.
So far a lot of these properties might not make a whole lot of sense, and that's all right. To
clarify things, let's take a close look at all of the properties— width , height , padding ,
border , and margin —that go into forming the box model.
Width & Height
Every element has default width and height. That width and height may be 0 pixels, but
browsers, by default, will render every element with size. Depending on how an element is
displayed, the default height and width may be adequate. If an element is key to the layout
of a page, it may require specified width and height property values. In this case, the
property values for non-inline elements may be specified.
The default width of an element depends on its display value. Block-level elements have a
default width of 100% , consuming the entire horizontal space available. Inline and inline-
block elements expand and contract horizontally to accommodate their content. Inline-level
elements cannot have a fixed size, thus the width and height properties are only relev-
ant to non-inline elements. To set a specific width for a non-inline element, use the width
1. div {
2. width: 400px;
3. }
The default height of an element is determined by its content. An element will expand and
contract vertically as necessary to accommodate its content. To set a specific height for a
non-inline element, use the height property:
1. div {
2. height: 100px;
3. }
Search WWH ::

Custom Search