CSS Block Level Elements
Description
One thing I dont hear much talk about is block level elements. The term block level element refers to layout rules used to display the element in a browser. There are two main sets of layout rules block level and inline. Additionally we group html elements under the terms block level and inline.
Block level elements have the following properties:
- they generate an element that fills the parent elements content area.
- they cannot have any elements to the left or to the right
- they have a line break before and after
- margin, height and width can be set to auto
- padding defaults to 0
- border defaults to none
- width does not include padding, border or margin
- height does not include padding, border or margin
- the background includes the padding, border, margin.
So what does all this mean?! It can be displayed in the following way:
Green Line - the content area
Red Line - the border. The distance between border and content area is the
padding area.
Blue Line - the element edge. The distance between border and element edge is the
margin.
margin-top
padding-top
Content Area - Width and Height affect this area.
padding-bottom
margin-bottom
Examples of block-level Elements
The following are block level elements:
<div>
<p>
<li>