The box model is something every designer working with CSS needs a full understanding
of, in order to know how elements interact with each other and also how various properties
affect an element. Essentially, each element in CSS is surrounded by a box whose
dimensions are automated depending on the content. By using width and height properties
in CSS, these dimensions can be defined in a specific manner.
You can set padding to surround the content and add a border and margins to the box. A
background image and background color can also be defined. Any background image or
color is visible behind the content and padding, but not the margin. The effective space an
element takes up is the sum of the box dimensions (which effectively define the available
dimensions for the box’s contents), padding, border, and margins. Therefore, a 500-pixelwide
box with 20 pixels of padding at each side and a 5-pixel border will actually take up
550 pixels of horizontal space (5 + 20 + 500 + 20 + 5).
of, in order to know how elements interact with each other and also how various properties
affect an element. Essentially, each element in CSS is surrounded by a box whose
dimensions are automated depending on the content. By using width and height properties
in CSS, these dimensions can be defined in a specific manner.
You can set padding to surround the content and add a border and margins to the box. A
background image and background color can also be defined. Any background image or
color is visible behind the content and padding, but not the margin. The effective space an
element takes up is the sum of the box dimensions (which effectively define the available
dimensions for the box’s contents), padding, border, and margins. Therefore, a 500-pixelwide
box with 20 pixels of padding at each side and a 5-pixel border will actually take up
550 pixels of horizontal space (5 + 20 + 500 + 20 + 5).
No comments:
Post a Comment