CSS box model (Example and properties of padding, border, margin).

CSS box modelEvery HTML element is a part of the box model. Distance between the two texts and two lines are one of the examples.
CSS box model has three important properties.

  • Padding.
  • Border.
  • Margin.

These properties are situated around the HTML element.

Padding.

Every element has certain height and width. Padding defines the extra height (from top or bottom) and width (from left or right) of an element. Generally, padding becomes most useful property while creating the menu bar for a website. Even menu bar of seowebsiteblog.com is created using the padding property.

Example:

<head>
<style>
div

{
height : 180px;
width : 180px;
padding : 20px;
background-color : orange;
}
</style>
</head>

Above code says the total height of div is 200px. Because 20px padding is added. We have defined background color by considering that box model is difficult to understand in white background. You can see 200x200px is colored by orange. If you write any text inside div you will see the text is leaving 20px from top, bottom, left and right. It will fit in 180x180px.

<body><div> This is example of padding. Total size of div is 200x200px along with padding 20×20. Text inside div will fit in 180x180px. It will leave 20x20px of padding</div></body>

Output will be.

padding

try it yourself

Padding for individual sides.

In the above example, we have used padding : 20px means 20px will be increased from all sides. But if you want to use padding for specific side, then you can use following properties.

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

for example.

<head>
<style>
div

{
height : 180px;
width : 180px;
padding-left : 20px;
background-color : orange;
}
</style>
</head>

output will be.

padding left

20px padding increases width of div only from the left side.

Border.

The space surrounds immediately after padding is called a border. let’s include 25px border with red color in the above example.

<head>
<style>
div

{
height : 180px;
width : 180px;
padding : 20px;
border : 25px solid red;

background-color : orange;
}
</style>
</head>

<body><div> This is example of padding and border. Total size of div is 200x200px along with the padding 20x20px. Text inside div will fit in 180x180px. It will leave 20x20px of padding. 25px border will be surrounded immidiately after padding</div></body>

output will be
border and padding

In the above example, we have written border: 25px solid red. Actually, we have written in short form.
border: 25px solid red can be written as border-width :25px; border-style : solid; border-color : red;

Border contains 3 properties

  • Border-width.
  • Border-color.
  • Border-style.
  • Border-radius.  css3.
  • Box-shadow.  css3.
  • Border-image.  css3.

Border width.

Border width helps to increase or decrease the width by setting values in pixels.
Example: border-width :5px;

Border color.

Border color can helps change color by setting values in color name or color code. Example: border-color : red;

Border style.

Border style helps to change the style on the border. Example: border-style : solid;

CSS border style

Border-radius.

Border-radius property is used to get rounded borders.
Example: border-radius : 30px;

<head>
<style>
div

{
height : 180px;
width : 180px;
padding : 20px;
border : 25px solid red;
border-radius : 30px;

background-color : orange;
}
</style>
</head>

<body><div> Border radius example</div></body>
Border radius example
Box-shadow.
After applying box-shadow property, shadow will be appear with the specified element. Box-shadow contain four values.
First value is used set its left or right position. Negative value defines its left position and positive value defines its right position.
Second value is used set its top or bottom position. Negative value defines its top position and positive defines its bottom position.
Third value defines the intensity of shadow. Value cannot negative. As value increases, shadow becomes blur.
Fourth value defines color.
Example: box-shadow: 10px 10px 10px grey;

<head>
<style>
div

{
height : 180px;
width : 180px;
padding : 20px;
border : 25px solid red;
border-radius : 30px;

background-color : orange;
box-shadow: 10px 10px 30px grey;

}
</style>
</head>

<body><div> Border radius example with shadow</div></body>
box shadow example
try it yourself
Border-image.
Border-image allows to set image to border.
<head>
<style>
div
{
height : 180px;
width : 180px;
padding : 20px;
border : 25px solid transparent;
border-radius : 30px;
background-color : grey;
box-shadow: 10px 10px 30px grey;
border-image: url(http://www.w3schools.com/css/border.png) 30 30 round;
color:white;
font-size: 30px;

}
</style>
</head>
<body><div> Border image example with shadow</div></body>
border image

Margin.

Margin defines the room between an element and its surrounding elements. Margin is specially used while creating a photo gallery. Google images also set some margin between photos. You will see same distance between each photos in Google images.

Margin contain same similar properties like padding.

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

values can be set in pixels or percentage.

Example:

<head>
<style>
div

{
height : 180px;
width : 180px;

margin-left : 40px;
margin-right :20px;
margin-top: 30px;
margin-bottom 25px;
background-color : orange;
}
</style>
</head>

If the value of all margin properties is same (for example 40px), then simply write margin: 40px;

This example will help to create a photo gallery.

<head>
<style>
div

{
height : 180px;
width : 180px;
padding : 20px;
border : 25px solid red;

background-color : orange;
margin: 10px;
float:left;

}
</style>
</head>

write following part in body.

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div>
</div><div></div>
</body>

You can images between <div></div> to create photo gallery.

output will be.

Margin example

Comments

comments

3 thoughts on “CSS box model (Example and properties of padding, border, margin).

  1. It is in reality a great and useful piece of information.
    I am satisfied that you just shared this useful information with us.
    Please stay us up to date like this. Thank you for sharing.

  2. Thanks for ones marrvelous posting! I quite enjoyedd redading
    it, you wilol be a great author. I will ensure that I bookmark
    your blog and will eventually come back sometime soon. I want to encourage you continue youjr great work, have a nice morning!

Comments are closed.