The previous lesson of the html lessons series was about some of the most important css properties. In this lesson we will discuss margin and padding properties in css.
Margin and Padding are very important css properties used for the positioning of content in an html web page. Both of these properties are discussed below in
detail:
Css Margin:
The css margin property is used to create an empty space between two html elements. To create margin a value in pixels, percentage or auto can assigned to an html element. In case of auto margin the browser itself will detect the margin of the element. Percentage margin is the percent gap of the width and the height of the element while the pixels margin is the fixed margin applied to an html element. Usually when we create a div element inside the body of a web page with the margin of the div set to 0, it should look like this:
with no space between the html body and the newly created div.What if we set the margin of the div element equal to 50px i.e
<body>
<div style="width:500px;height:200px;border:2px solid black;margin:50px;"></div>
</body>
Then the div element should look something like this:
Margin can be applied to a single side or all four sides of an html element. Margin to a single side can be applied like this:
Margin Top:
<div style="width:500px;height:200px;border:2px solid black;margin-top:50px;"></div>
Margin Bottom:
<div style="width:500px;height:200px;border:2px solid black;margin-bottom:50px;"></div>
Margin Left:
<div style="width:500px;height:200px;border:2px solid black;margin-left:50px;"></div>
Margin Right:
<div style="width:500px;height:200px;border:2px solid black;margin-right:50px;"></div>
Margin to all 4 sides can applied like this i.e <div style="width:500px;height:200px;border:2px solid black;margin:50px;"></div>
Css Padding:
Css Padding is used to create a gap between an html element and the content inside that element. Let us say we have a div element with some text content inside it and no padding.
<div style="width:500px;height:200px;border:2px solid black;">
This is Random Text.This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text.
</div>
The above output div has no gap between the boundaries of the div element and the text content inside it. What if we set the padding of the div equal to 20px.
<div style="width:500px;height:200px;border:2px solid black;padding:20px;">
This is Random Text.This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text.
</div>
A gap will appear between the boundaries of the div and the text content inside it. Just like the css margin property, we can apply padding on one side of the html element or all the sides.
Padding Top:
<div style="width:500px;height:200px;border:2px solid black;padding-top:20px;"></div>
Padding Bottom:
<div style="width:500px;height:200px;border:2px solid black;padding-bottom:20px;"></div>
Padding Left:
<div style="width:500px;height:200px;border:2px solid black;padding-left:20px;"></div>
Padding Right:
<div style="width:500px;height:200px;border:2px solid black;padding-right:20px;"></div>
Padding to all 4 sides can applied like this i.e <div style="width:500px;height:200px;border:2px solid black;padding:20px;"></div>
Related Posts
Css Margin:
The css margin property is used to create an empty space between two html elements. To create margin a value in pixels, percentage or auto can assigned to an html element. In case of auto margin the browser itself will detect the margin of the element. Percentage margin is the percent gap of the width and the height of the element while the pixels margin is the fixed margin applied to an html element. Usually when we create a div element inside the body of a web page with the margin of the div set to 0, it should look like this:
with no space between the html body and the newly created div.What if we set the margin of the div element equal to 50px i.e
<body>
<div style="width:500px;height:200px;border:2px solid black;margin:50px;"></div>
</body>
Then the div element should look something like this:
Margin can be applied to a single side or all four sides of an html element. Margin to a single side can be applied like this:
Margin Top:
<div style="width:500px;height:200px;border:2px solid black;margin-top:50px;"></div>
Margin Bottom:
<div style="width:500px;height:200px;border:2px solid black;margin-bottom:50px;"></div>
Margin Left:
<div style="width:500px;height:200px;border:2px solid black;margin-left:50px;"></div>
Margin Right:
<div style="width:500px;height:200px;border:2px solid black;margin-right:50px;"></div>
Margin to all 4 sides can applied like this i.e <div style="width:500px;height:200px;border:2px solid black;margin:50px;"></div>
Css Padding:
Css Padding is used to create a gap between an html element and the content inside that element. Let us say we have a div element with some text content inside it and no padding.
<div style="width:500px;height:200px;border:2px solid black;">
This is Random Text.This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text.
</div>
The above output div has no gap between the boundaries of the div element and the text content inside it. What if we set the padding of the div equal to 20px.
<div style="width:500px;height:200px;border:2px solid black;padding:20px;">
This is Random Text.This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text. This is Random Text. This is Random Text.
This is Random Text. This is Random Text. This is Random Text.
</div>
A gap will appear between the boundaries of the div and the text content inside it. Just like the css margin property, we can apply padding on one side of the html element or all the sides.
Padding Top:
<div style="width:500px;height:200px;border:2px solid black;padding-top:20px;"></div>
Padding Bottom:
<div style="width:500px;height:200px;border:2px solid black;padding-bottom:20px;"></div>
Padding Left:
<div style="width:500px;height:200px;border:2px solid black;padding-left:20px;"></div>
Padding Right:
<div style="width:500px;height:200px;border:2px solid black;padding-right:20px;"></div>
Padding to all 4 sides can applied like this i.e <div style="width:500px;height:200px;border:2px solid black;padding:20px;"></div>
Css Float Property
Important Css Properties
Types of Css
Making Navigation menus using unordered lists
No comments:
Post a Comment