Marusya's School Notes

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides of an element:

HTML file:	Displayed by browser:
<style> p { background-color: yellow; } p.ex { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } </style> <body> <p>This is a paragraph with no specified margins except the yellow background.</p> <p class="ex">This is a paragraph with specified margins, including the yellow background. There is 100px white space above and below this paragraph as well as a 50px left margin and a 150px right margin.</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 is a paragraph with specified margins, including the yellow background. There is 100px white space above and below this paragraph as well as a 50px left margin and a 150px right margin. 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 is a paragraph with specified margins, including the yellow background. There is 100px white space above and below this paragraph as well as a 50px left margin and a 150px right margin.</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 is a paragraph with specified margins, including the yellow background. There is 100px white space above and below this paragraph as well as a 50px left margin and a 150px right margin.

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