Marusya's School Notes

Padding - Individual sides

In CSS, it is possible to specify different padding for different sides:

HTML file:	Displayed by browser:
<style> p { background-color: yellow; } p.ex { padding-top: 25px; padding-right: 50px; padding-bottom: 75px; padding-left: 100px; } </style> <body> <p>This is a paragraph with no specified margins except the yellow background.</p> <p class="ex">This paragraph has the specified padding which is also displayed in yellow assigned to the paragraph element. There is 25 px of padding on top, 50 px padding on the right side, 75 px below the paragraph and 100 px to the left side of the paragraph. </p> <p>This is a paragraph with no specified margins except the yellow background.</p> </body>	This is a paragraph with no specified margins except the yellow background. This paragraph has the specified padding which is also displayed in yellow assigned to the paragraph element. There is 25 px of padding on top, 50 px padding on the right side, 75 px below the paragraph and 100 px to the left side of the paragraph. This is a paragraph with no specified margins except the yellow background.

HTML file:

Displayed by browser:

<body>
<p>This is a paragraph with no specified margins except the yellow background.</p>
<p class="ex">This paragraph has the specified padding which is also displayed in yellow assigned to the paragraph element. There is 25 px of padding on top, 50 px padding on the right side, 75 px below the paragraph and 100 px to the left side of the paragraph. </p>
<p>This is a paragraph with no specified margins except the yellow background.</p>
</body>

This is a paragraph with no specified margins except the yellow background.

This paragraph has the specified padding which is also displayed in yellow assigned to the paragraph element. There is 25 px of padding on top, 50 px padding on the right side, 75 px below the paragraph and 100 px to the left side of the paragraph.

This is a paragraph with no specified margins except the yellow background.