CSS Padding
CSS padding is the space between an element's border and the content within it.
Margin is outside the border.
Example: 1
<html><head>
<style type ="text/css">
p
{
Background-color: red;
color: blue;
}
</style>
</head>
<body>
<p> Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.</p>
</body>
</html>
Output
Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.
We see from the output that we have a context and we don’t have space between the edge of background color red(border) and text.
If we want to space between border edge and text, we can add padding attribute. Lets see above example adding padding attribute.
Example: 2
<html><head>
<style type ="text/css">
p
{
background-color: red;
color: blue;
padding : 30px;
}
</style>
</head>
<body>
<p> Lord, I am your slave. Your wish is my wish. Let my life reflect your wishes only.</p>
</body>
</html>
Output
Now we have space between our text and the edge of our border. 30 pixels of right, 30 pixels of top,30 pixels of bottom and 30 pixels of right even though there is over 100 pixels. 30 pixels are padding all around the border. |
| Difference between margin and padding |
No comments:
Post a Comment