CoderTools Web site

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>

TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/17/2017 8:07:54 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP