CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; }

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Read More

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements. 

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; }

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Read More

CSS Height and Width

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

This element has a height of 200 pixels and a width of 50%

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;}


............................
This element has a height of 100 pixels and a width of 500 pixels.

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;}

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Note: The value of the max-width property overrides width.

The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;}

All CSS Dimension Properties

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

Read More

CSS Height and Width

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

This element has a height of 200 pixels and a width of 50%

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;}


............................
This element has a height of 100 pixels and a width of 500 pixels.

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;}

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Note: The value of the max-width property overrides width.

The following example shows a <div> element with a height of 100 pixels and a max-width of 500 pixels:

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;}

All CSS Dimension Properties

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

Read More

CSS Padding

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

The following example sets different padding for all four sides of a <div> element: 

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;}

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px

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

-------------------------------

If the padding property has three values:

• padding: 25px 50px 75px;
• top padding is 25px
• right and left paddings are 50px
• bottom padding is 75px

div {
    padding: 25px 50px 75px;}

-------------------------------

If the padding property has two values:

• padding: 25px 50px;
• top and bottom paddings are 25px
• right and left paddings are 50px

div {
    padding: 25px 50px;}

-------------------------------

If the padding property has one value:

• padding: 25px;
• all four paddings are 25px

div {
    padding: 25px;}

-------------------------------

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):

div {
    width: 300px;
    padding: 25px;}

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example:

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;}

________________________________________________________________________

All CSS Padding Properties

Property	Description
padding	A shorthand property for setting all the padding properties in one declaration
padding-bottom	Sets the bottom padding of an element
padding-left	Sets the left padding of an element
padding-right	Sets the right padding of an element
padding-top	Sets the top padding of an element

Read More

CSS Padding

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

The following example sets different padding for all four sides of a <div> element: 

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;}

Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px

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

-------------------------------

If the padding property has three values:

• padding: 25px 50px 75px;
• top padding is 25px
• right and left paddings are 50px
• bottom padding is 75px

div {
    padding: 25px 50px 75px;}

-------------------------------

If the padding property has two values:

• padding: 25px 50px;
• top and bottom paddings are 25px
• right and left paddings are 50px

div {
    padding: 25px 50px;}

-------------------------------

If the padding property has one value:

• padding: 25px;
• all four paddings are 25px

div {
    padding: 25px;}

-------------------------------

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):

div {
    width: 300px;
    padding: 25px;}

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example:

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;}

________________________________________________________________________

All CSS Padding Properties

Property	Description
padding	A shorthand property for setting all the padding properties in one declaration
padding-bottom	Sets the bottom padding of an element
padding-left	Sets the left padding of an element
padding-right	Sets the right padding of an element
padding-top	Sets the top padding of an element

Read More

CSS Margins

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

---

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

The following example sets different margins for all four sides of a <p> element:

Example

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

_______________________________________

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

So, here is how it works:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

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

__________________________________________

If the margin property has three values:

• margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

p {
    margin: 25px 50px 75px;}

If the margin property has two values:

margin: 25px 50px;

top and bottom margins are 25px

right and left margins are 50px

Example

p {

    margin: 25px 50px;

}

If the margin property has one value:

margin: 25px;

all four margins are 25px

Example

p {

    margin: 25px;

}

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example

div {

    width: 300px;

    margin: auto;

    border: 1px solid red;

}

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example

div {

    border: 1px solid red;

    margin-left: 100px;

}

p.ex1 {

    margin-left: inherit;

}

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example

h1 {

    margin: 0 0 50px 0;

}

h2 {

    margin: 20px 0 0 0;

}

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

Test Yourself with Exercises!

All CSS Margin Properties

Property Description

margin A shorthand property for setting the margin properties in one declaration

margin-bottom Sets the bottom margin of an element

margin-left Sets the left margin of an element

margin-right Sets the right margin of an element

margin-top Sets the top margin of an element

Read More