padding:1em;
padding-left:2em;
padding-right:20px;
padding-top:10px;
padding-bottom:4em;
Padding affects the area of a box or inline element, between the content of that element, and the border
(visible or not). Effect: This will keep the content in distance to the edges of the element, like text in
a div will not sit right on the border, but keep distance. Padding does not affect the size of the border,
but it does affect the space that the element takes up in the page.
(Style in bold)
<div style="
border:solid red 2px; ">
This is a div with some text in it, and a border of two pixels width.
</div>
<img alt="sample pic" src="nash.jpg" style="
border:solid red 2px; " />
This is a div with some text in it, and a border of two pixels width.
One can see how the content sits right on the edge of the border, which (like with the image) might be welcomed, but definitely
text sitting so close to the border is not nice. For that we use padding: That will push the content away from the border.
(Style in bold)
<div style="
border:solid red 2px; padding:1em; ">
This is a div with some text in it, and a border of two pixels width.
</div>
<img alt="sample pic" src="nash.jpg" style="
border:solid red 2px; padding:1em; " />
This is a div with some text in it, and a border of two pixels width.
The property padding: will result in a gap between border and content, on all four sides, the same length.
But one can also address each side on its own:
(Style in bold)
<div style="
border:solid red 2px; padding-top:1em; ">
This is a div with some text in it, and a border of two pixels width.
</div>
<img alt="sample pic" src="nash.jpg" style="
border:solid red 2px; padding-left:20px; padding-right:20px; " />
This is a div with some text in it, and a border of two pixels width.
Mainpage
