CSS Padding and Margin Properties
- Introduction to CSS Padding & Margin Properties.
- CSS padding properties.
- CSS padding shorthand property.
- CSS margin properties.
- CSS margin shorthand property.
Introduction to Padding and Margin Properties
Padding and margin are very important for the designing of any webpage or website. CSS margin and padding are defined in the context of the border of any HTML element (<div>, <h1> and <p> etc.). Padding is a space that is defined inside the border and margin is defined outside of the border. These are explained by the below diagram.
In the diagram which is given above, the Suva Grey color area between the text and border of DIV is called padding. The Black color area is a border which comes between margin and padding. As you know, the space inside the border and outside the content/text area is called padding. The Scarlet color area outside the border is the margin of DIV. The margin is used to define the space between elements from one element to another.
You should always keep in mind that every HTML element has the border which is hidden by default. To show the border of an element, you can set its border property.
CSS Padding Properties
To define the padding of elements, CSS provides you four properties. You can define the padding of each side independently by using these properties. If you want to keep the padding of all sides same, CSS provides you another property.
From this property, you define the padding of all sides in a single statement. Padding is defined in pixels and the value of padding can’t be defined negatively. Now we will try to know about CSS padding properties.
padding-left Property
By this property, you can define the left padding of an element. Whatever value you will give to this property, the same space creates inside the left side of the border. An example of this has been given below.
padding-left: 20px;
padding-right Property
By this property, you can define the right padding of an element. Whatever value you will give to this property, the same space creates inside the right side of the border. An example of this has been given below.
padding-right: 30px;
padding-top Property
This property is used to define padding inside the border on the top of the element. An example of this has been given below.
padding-top: 10px;
padding-bottom Property
By this property, you can define padding on the bottom side of the element. Whatever value you will give to this property, the same space creates inside the bottom side of the border. An example of this has been given below.
padding-bottom: 10px;
Let's try to understand the use of these properties through an example.
In the above example, a div is created which id is MbhDiv. The padding of all sides has been set through the CSS in the <head> tag. This example will generate the below output.
<!DOCTYPE html>
<html>
<head>
<title> CSS Padding Property Example </title>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid blue;
padding-left: 30px;
padding-right: 50px;
padding-top: 20px;
padding-bottom: 40px;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
Padding creates space between content and border. It is very important to make your content(text,image and video etc.) appear beautiful on the webpage.
</div>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid blue;
padding-left: 30px;
padding-right: 50px;
padding-top: 20px;
padding-bottom: 40px;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
Padding creates space between content and border. It is very important to make your content(text,image and video etc.) appear beautiful on the webpage.
</div>
</body>
</html>
padding Shorthand Property
If you want, you can use a padding shorthand property instead of using these four different properties. In this shorthand property, you can define padding for all sides. Its syntax is being given below.
padding: top right bottom left;
In this property, first of all, you will have to define the padding of the top side of the element. After this, the padding of the left side will be defined again right side, and at last bottom side. An example of this has been given below.
padding: 20px 10px 20px 10px;
If you define only one value with this property then the same padding applies to all sides. You can see in the below example.
padding: 10px;
The above statement sets the padding 10px for all sides.
Let's try to understand the use of these properties through an example.
The above statement sets the padding 10px for all sides.
Let's try to understand the use of these properties through an example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Padding Shorthand Property Example </title>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid green;
padding: 20px 60px 40px 20px;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
Padding creates space between content and border. It is very important to make your content(text,image and video etc.) appear beautiful on the webpage.
</div>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid green;
padding: 20px 60px 40px 20px;
text-align: justify;
}
</style>
</head>
<body>
<div id = "MbhDiv">
Padding creates space between content and border. It is very important to make your content(text,image and video etc.) appear beautiful on the webpage.
</div>
</body>
</html>
The above script will generate the below output.
CSS Margin Properties
CSS margin properties are used to create space around the elements. Margin properties determine how much space will be located outside of the elements. CSS provides you four margin properties. From these properties, you can define the margin of the four sides.
Also, CSS gives you a margin shorthand property as well. From which you can define values for all these properties in a single statement. You can define the value of all these properties by four types.
- auto - When you give auto value, the browser automatically sets the appropriate margin.
- length - In this type of value, you define the margin length in pixels.
- percent(%) - If you want to set the margin of the element, you can set the width in percent of the element that contains the margin.
- inherit - If you want to inherit margin from the parent element, you can pass this inheritance value.
margin-top Property
By this property, you set the margin on the top of the element. This property defines how much space will be on the outside side of the border above the element. An example of this has been given below.
margin-top: 20px;
margin-right Property
By this property, you set the margin on the right side of the element. This creates a specified space on the right side of the element and outside of the border. An example of this has been given below.
margin-right: 10px;
margin-bottom Property
By this property, you set the margin below of the element. Whatever value you will give to this property, the same space will be created at the bottom of the element on the outside of the border. An example of this has been given below.
margin-bottom: 20px;
margin-left Property
This property is used to set the margin on the left of the element. When you set this property with value then space creates outside of the border on the left side of the element.
margin-left: 20px;
Now we will try to understand these margin properties through an example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Margin Properties Example </title>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid red;
margin-top: 50px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
text-align: justify;
}
</style>
</head>
<body>
<div id="MbhDiv">
It is important to know the CSS margin properties for the best website/webpage design. Margin creates space between elements.
</div>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid red;
margin-top: 50px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
text-align: justify;
}
</style>
</head>
<body>
<div id="MbhDiv">
It is important to know the CSS margin properties for the best website/webpage design. Margin creates space between elements.
</div>
</body>
</html>
As you can see, in the above example, margins of all sides have been set through four properties. This example produces the below output.
margin Shorthand Property
Instead of using four properties, you can use a single margin shorthand property. This property is called margin property. Its syntax has been given below.
margin: top right bottom left;
Now, look at the example of this property.
margin 20px 10px 20px 10px;
Let's try to understand the use of these properties through an example.
Let's try to understand the use of these properties through an example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Margin Shorthand Property Example </title>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid black;
margin: 50px 10px 20px 30px;
text-align: justify;
}
</style>
</head>
<body>
<div id="MbhDiv">
It is important to know the CSS margin shorthand properties for the best website/webpage design. Margin creates space between elements.
</div>
<style type="text/css">
#MbhDiv
{
width: 25%;
border: 5px solid black;
margin: 50px 10px 20px 30px;
text-align: justify;
}
</style>
</head>
<body>
<div id="MbhDiv">
It is important to know the CSS margin shorthand properties for the best website/webpage design. Margin creates space between elements.
</div>
</body>
</html>
As you can see, in the above example, margins of all sides have been set through single properties. This example will produce the below output.
If you assign a single value to this property then the margin of all sides is set by the same value.
margin: 20px;
It will set the 20px margin each and every side.
<<-- PREVIOUS NEXT -->>
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.