Box Model

Introduction

In a web page document each part is done with a rectangular box. In CSS each element is described using the standard box model.

 

 

 

 

 

 

Content

This is where the text and images are shown.

The content surrounds the rectangle which is given by the width and height of the box, which usually relies on the on the parts rendered content. The four content edges define the box’s content.   

Example

a:after {
    content: " (" attr(href) ")";
}

 

Padding

This clears the area around the content and is not visible.

The top, bottom, left, right padding can be changed separately.

Values

Length: defines a fixed padding using pixels, pt, em, etc.

%: sets padding by percentage.

Example

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

 

Border

This is a border that surrounds the padding and content.

Before you use a border a border style must be set.

 

Border styles

·         Dotted.

·         Dashed.

·         Solid.

·         Double.

·         Grove.

·         Ridge.

·         Inset.

·         Outset.

Border width

The border-width sets the width of the border using pixels or using values like thin, medium, or thick.

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}  

Border colour

This is used to set the colour of the border which can be set by name of a colour, RGB Value or a hex or transparent.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

Margin

Clears elements outside the border.  The margin is not visible.

The top, right, left and bottom can be changed separately .

Values

Auto: The browser does it for you.

Length: You can set a margin using px, cm, etc.

%: You can set a margin by percentage.

Inherit: Specifies that the margin should be inherited from the parent element.

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

http://www.w3schools.com/css/css_boxmodel.asp