Results per page:

Match: any search words all search words

Page Menu

HTML Box Model Introduction
Box Model Diagram
Box Model Details


 

HTML Box Model Introduction

All the HTML elements can be regarded as boxes.

The Box Model shows the areas that CSS styles are applied too

Your text and or graphic images content is placed in the box which can be surrounded by padding, border and margin as shown in the Box Model Diagram

Box Model Diagram
Box Model Diagram

 

Box Model Details

My content

This is where your content is placed which could be:

  • Text
  • Image(s)
  • Table(s)
  • Div(s)
  • Most other elements
  • A combination of some or all the above

Padding

If required:

  • Places a space around 'Your Content'
    • Text normally requires padding if you have a border to prevent the text butting up against the border.
    • Graphics padding is optional depends on the desired style required
  • The padding aquires the background color of the the content area
  • Padding can be applied to all sides or seperatly applied to selected side(s) top, right, bottom and/or left
  • Set width to 0 (Zero) for no padding

 

Border

If required:

  • The border surround the padding and content.
  • There are various styles for Borders
  • The border can be applied to all sides or seperatly applied to selected side(s) top, right, bottom and/or left
  • Set width to 0 (Zero) for no Border

 

Margin

If required:

  • The Margin applies a space outside of the Border, it is outside the actual element.
  • The margin does not have a background color, it is completely transparent and shows the background colour of the underling element, such as the body element
  • The border can be applied to all sides or seperatly applied to selected side(s)- top, right, bottom and/or left
  • Set to 0 for no Margin
  • Positive or Negative margins can be applied
    • A Negative top or left margin applied to a static element moves the element in that direction
    • A Negative bottom or right margin applied to a static element moves the following element towards the original element
      • A static element is an element with no float applied
    • A Negative margin can create Overlap of Elements with dramatic effect
    • Negative margins are valid but some designers think they should not be used other think they are great.

The margin does not have a background color, it is completely transparent and shows the background colour of the underling element, such as the body element

 

Widths Heights

The CSS width & height attributes are applied to 'Your Contents'.

The overall width is the combined width of:
'Your Contents width +

2 padding widths +

2 borders widths + 

2 margin widths

Always declare a DOCTYPE for this to be true in IE.

 

Box Model Code Example

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Box Model Example</title>

<style type="text/css">

.example1
{
width:220px;
background-color: yellow;
padding:0px;
border:0px;
margin:0px;
}

.example2
{
width:220px;
background-color: yellow;
padding:10px;
border:5px solid black;
margin:40px;
}

.example3
{
width:220px;
padding:0px 4px 40px 100px;
margin: -28px 0px -10px 100px;
background: #FF0;
border-top: 1px solid #000;
border-right: 4px dashed #900;
border-bottom: 8px double #60F;
border-left: 16px inset #6F3;
}

</style>

</head>

<body>

<h1>Box Model Example</h1>

<hr style="width: 100%; height: 1px;">
<p class="example1">My Content Example 1</p>

<hr style="width: 100%; height: 1px; color: blue;">
<p class="example2">My Content Example 2</p>

<hr style="width: 100%; height: 1px; color:red;">
<p class="example3">My Content Example 3</p>

<hr style="width: 100%; height: 1px; color:green;">
<p>&nbsp;</p>
<p>Click for <a href="../../css/css-box-model.htm"> Details of Box Model Example</a></p>
</body>
</html>

View this code in a browser Leave the view window open and follow the explanation below

 

Examples of the box model

The above code displays 3 example of how styling the padding, borders & margins affect the apearance of the box model.

  • The 3 examples have the same content except for the number
  • 4 Horizontal lines have been placed in the Example to help demonstrate the effect of the margins.

 

Example 1

There is no styling for the padding, borders & margins which are set to 0 (zero)

Example 2

Padding set to 10

Borders set to a width of 5 pixels, solid style and coloured black

Margins are set to 40 pixels

Example 3

 

Padding

Padding - different amounts of padding were set to each side.

These could be set as follows:

padding-top: 0px;
padding-right: 4px;
padding-bottom: 40px;
padding-left: 100px;

I used a shorthand code version:
padding:0px 4px 40px 100px;

Sides are set in a clockwise direction starting at the top:
ie. 0 top padding

Margin

The margins were set with shorthand code in the orders of top, right, bottom & left margins:

margin: -28px 0px -10px 100px;

  • The margin is the space outside the border or where the border would be if there is no border.
  • Note 2 negative numbers have been entered.
    • The margin-top: -28px has moved the My Content Example 3 box upwards so that it overlaps the Horizontal line that preceed it.
    • The margin-top: -10px has allowed the Horizontal line that follow the My Content Example 3 box to touch the bottom of the box. A larger negative such as -20 would have allowed the line to move higher & overlap the My Content Example 3 box.