CSS Box Model

Box model is a fundamental concept in CSS, is used for define the design and layout of a HTML element on a web page.

A box model define how the content, padding, border and margin of a content renders on a web page.

Box Model

Content- Text, Image etc.

Padding- Space between content and border.

Border- Separates the padding and margin.

Margin- Space outside of border.

Here, we can clearly see that how box model works.

Padding

CSS padding properties is used to create space between the element’s content and it’s border.

In CSS we can define the padding properties for each side of an element.

Example:

padding-top:20px;
padding-right:25px;
padding-bottom:30px;
padding-left:15px;
                

Shorthand padding properties

By using CSS shorthand padding property, we can define padding for all four sides of an element in a single line.

Example:

padding:20px 25px 30px 15px;
                

Also, we can use these shorthand properties, to specify the same padding for all four sides of an element.

Example:

In the below Image the green area denotes the padding.

Margin

In CSS margin property is used to create a space around the element, outside the border.

Note: Some HTML block level element have its own default margin.

In CSS we can define the margin properties for each side of an element.

Example:

margin-top:20px;
margin-right:25px;
margin-bottom:30px;
margin-left:15px;
                

Shorthand margin properties

By using CSS shorthand margin property, we can define margin for all four sides of an element in a single line.

Example:

margin:20px 25px 30px 15px;
                

Also, we can use these shorthand properties, to specify the same margin for all four sides of an element.

Example:

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

Example:

margin:auto;
                

In this Image, margin is shown in orange color space around the element, just outside the border.