CSS Box Model

 

To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. The illustration below shows these various parts:

 

CSS Box Model

 

  • Content: is the area inside the box, where the content appears.
  • Padding: padding is an added spacing inside the box that clears an area around the content. The padding is affected by the background color of the box and adds to the dimensions of the box.
  • Border: is a line that goes around the padding and content.
  • Margin: margin is an added spacing outside of the box that clears an area around the border. The margin does not have a background color and is completely transparent. Margins push the other outside elements.

 

 

Margins, Padding and Border Rules

 

Margins

Margin

Example

Description

Top Margin

h1 {margin-top:20px;}

Adds 20px margin to top.

Bottom Margin

h1 {margin-bottom:20px;}

Adds 20px margin to bottom.

Right Margin

h1 {margin-right:20px;}

Adds 20px margin to right.

Left Margin

h1 {margin-left:20px;}

Adds 20px margin to left.

Margin

P { margin:25px 50px 75px 100px; }

Top, right, bottom, left margins.

 

Padding

Padding

Example

Description

Top padding

h1 {padding-top:20px;}

Adds 20px padding to top.

Bottom padding

h1 {padding-bottom:20px;}

Adds 20px padding to bottom.

Right padding

h1 {padding-right:20px;}

Adds 20px padding to right.

Left padding

h1 {padding-left:20px;}

Adds 20px padding to left.

padding

P {padding:25px 50px 75px 100px; }

Top, right, bottom, left padding.

 

Border

Border

Example

Description

Top Border

P {border-top-style:dotted;}

Adds dotted border to top.

Bottom Border

P {border-bottom-style:solid;}

Adds solid border to bottom.

Right Border

P {border-right-style:double;}

Adds double border to right.

Left Border

P {border-left-style:dashed;}

Adds dashed border to left.

Border

P {border-style:dashed;}

Adds a dashed border to the top, right, bottom, and left sides.

 

Border Style

None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit.

It does what it says.

Border Color

P {border-color:#0f0;}

Adds green border color.

 

All border attributes.

h1 {
border-width:5px;
border-style:solid;
border-color:#0f0;
}

Adsd a green border of 5px all around the box.

 

Shorthand Coding

h1 {
border:5px solid #0f0;
}

Add a green border of 5px all around the box.

 

 

Margins and Padding Rendering

Most Web browsers have different default settings for the base margins and padding. This means you could get inconsistent results on the page depending upon which browser you're using to view the page. The best way to solve this is to set all the margins and padding on the html and body tags to zero:

*{

margin:0;

padding:0;

}

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>