CSS Box Model

The box-model is a box that wraps around HTML elements, and it consists of: margins, borders, padding, the height and width of the element and its content.
In the standard box model (content-box), the padding, borders, and margins of an element are added to the width and height of that element to determine the space it occupies in the layout.
- The image below shows the box model.

width and height

The width and the height properties define the width and height of the content area of an element.
- Values:

auto - The width /height will be calculated by the browser (default).
length - A fixed dimension (px, em, cm).
percentage - Defines the width /height in percent (%) of the containing block.

- Syntax:

selector { width: value; height: value; }

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>width and height</title>
 <style type="text/css"><!--
 #idd {
  width: 250px;
  height: 100px;
  background-color: #a7fea8;
 }
 --></style>
</head>
<body>
 <div id="idd">Web site: http://CoursesWeb.net</div>
</body>
</html>

- Result:

Web site: http://CoursesWeb.net

margin

The margin property sets the four margins surrounding an element. Each side may take one of the following property values:
- Values:

auto - The margin will be calculated by the browse.
length - A fixed dimension (px, em, cm). Default is 0px.
percentage - The margins will be a percentage (%) of the containing block's width.

It is possible to use negative values, to overlap content.
- Syntax:

selector { margin: top_val right_val bottom_val left_val; }

If you specify all four values in the same definition, they represent the margins of the element in the following order: top, right, bottom and left.
If you specify only one value, it will be applied to all four directions.
In the cases of two or three values specified, the missing values are copied from opposite defined edges.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>margin</title>
 <style type="text/css"><!--
 #idd {
  margin: 10px 20px 5px 30px;
  background-color: #a7fea8;
 }
 --></style>
</head>
<body>
 <div id="idd">Another Web site: http://www.MarPlo.net</div>
</body>
</html>

- Result:

Another Web site: http://www.MarPlo.net

It is possible to set the margin value for one side only, without affect the other margins.
So, if you want to specify different margins for different sides, you can use each of the fallowing properties:

margin-top, margin-bottom, margin-left, margin-right

With the same values as for the margin property, as you can see in the examples below.

margin-top: 15px;
margin-bottom: 10px;
margin-right: 40px;
margin-left: 40px;

/* Echivalent with */
margin: 15px 40px 10px 40px;

Other example:

margin: 10px 35px;

/* Echivalent with */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 35px;

When margins from two elements contact each other on a page, they "collapse" into one another. The margin between each element is the size of the largest of the two margin properties.
For example, if there is an <h3> with a bottom margin of 25 pixels followed by a paragraph with a top margin of 10 pixels, the space between the two elements will be 25 pixels, not 35.

padding

The padding property sets the space between the element border and the element content area.
Each side may take one of the following values:
- Values:

length - A fixed dimension (px, em, cm). Default is 0px.
percentage - The padding will be a percentage (%) of the containing block's width.

It is possible to use negative values too.
- Syntax:

selector { padding: top_val right_val bottom_val left_val; }

If you specify all four values in the same definition, they set the padding of the element in the following order: top, right, bottom and left.
If you specify only one value, it will be applied to all four directions.
In the cases of two or three values specified, the missing values are copied from opposite edges.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>padding</title>
 <style type="text/css"><!--
 #idd {
  padding: 10px 20px 5px 30px;
  background-color: #a7fea8;
 }
 --></style>
</head>
<body>
 <div id="idd">Free online CSS lessons.</div>
</body>
</html>

- Result:

Free online CSS lessons.

It is possible to set the padding value for one side only, without affect the other sides, using each of the fallowing properties:

padding-top, padding-bottom, padding-left, padding-right

With the same values as for the padding property, as you can see in the examples below.

padding-top: 15px;
padding-bottom: 10px;
padding-right: 30px;
padding-left: 30px;

/* Echivalent with */
padding: 15px 30px 10px 30px;

Other example:

padding: 10px 25px;

/* Echivalent with */
padding-top: 10px;
padding-bottom: 10px;
padding-right: 25px;
padding-left: 25px;

overflow

The overflow defines what is done if the content in a box is too big for its defined space.
- Values:

auto - Clips the content and draws scrollbars only when they are needed.
visible - Shows the content outside of the box (default).
hidden - Clips the content and hides what falls outside the dimensions of the box.
scroll - Clips the content and always draws scrollbars to allow for access to additional content.

- Syntax:

selector { overflow: value; }

The overflow behavior for the width and the height of a box can be individually set with the overflow-x and overflow-y properties.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>overflow</title>
 <style type="text/css"><!--
 #idp {
  width: 190px;
  height: 80px;
  background-color: #a7fea8;
  overflow: auto;
 }
 --></style>
</head>
<body>
 <p id="idp">Content with multiple lines text<br />
 In a paragraph that use<br />
 The "overflow" CSS property.<br />
 End of the text content.</p>
</body>
</html>

- Result:

Content with multiple lines text
In a Paragraph that use
The "overflow" CSS property.
End of the text content.

Min and Max dimensions

With Min and Max you can place restrictions on the size of elements.
For example, if you set max-width or /and max-height to an element, will have the initial dimensions but when you add more content, this element will not overcome the dimensions set with these properties.
Similar, the min-height and min-width properties sets the minimum height and the minimum width of an element.
- Values:

length - A fixed dimension (px, em, cm).
percentage - Defines the dimensions in percent (%) of the containing block.

Example:

div {
 min-height: 100px;
 max-height: 400px;
 min-width: 100px;
 max-width: 500px;
}

Backgrounds <<-- Previous ----------- Next -->> CSS Border