CSS Box Model
When the term 'CSS Box Model' is used, it usually refers to design and layout within CSS. The box model shows how a html element (box) and its properties relate to each other. The box model basically tells the browser that a box is defined with certain properties (height, width) and the browser should display this box with its properties in a way that the page can manage e.g. height 50 px means 50 px tall. Besides height and width, there are many other different properties which can be used on certain objects, These properties can include:
-
Padding
-
The padding property defines a space between the content and the box it's self. This usually adds a layer on to the box which involves covering up the space with the box's border line (Depending on size px), making it look like the border is next to the content but the border really covers up the space with its line.
-
-
Margins
-
The margin property defines space around elements (boxes). This usually involves indenting a element which leaves space between the element and other elements.
-
-
Border
-
The border property provides a border around the element, which is usually shown by a layer on top of the actual border.
-
-
Contents
-
The contents is every element which is placed into a web page. Every element in a web page can be accessed by CSS.
-
-
Inline
-
This one of the ways that a HTML element is displayed. For example, inline text would allow a line of text to take as much room (width) as it wanted and not allow any new lines. This can be seen by the element going across the page without stopping for a new line.
-
-
Block
-
This one of the ways that a HTML element is displayed. For example, block text would allow a new line before and after the current line and would take up the full length available. This can be seen by the element going across the page and stopping for a new line.
-
CSS Example
<Style type="text\css">
body
{
margin-top: 25px;
margin-left: 0;
margin-right: 0;
padding: 2px;
background-color: #ff0000;
}
</style>
Description
In this example, the body tag is being set properties. The margin will indent the page by 25 px from the top of the window and other margins will be ignored because they are set to 0 px. Padding will be wrapped around the body section by 2px and the background of the body section will be coloured red.