CSS – Margins
CSS – Margins
The margin property using CSS specifies the space around the HTML document in respect of the total width. It has the following properties,
Margin-bottom: it specifies the bottom margin of the paragraph.
Margin-top: it specifies the top margin of the paragraph.
Margin-left: it specifies the left margin of the paragraph.
Margin-right: it specifies the right margin of the paragraph.
Margin: this property sets all four types of margins in one statement.
Example:
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 10px; border:1px dotted blue;">
This demonstrates bottom margin of 10px.
</p>
<p style = "margin-top: 5px; border:1px solid black;">
This demonstrates top margin of 5px.
</p>
<p style = "margin-left: 5%; border:1px dotted black;">
This demonstrates left margin in 5 percent
</p>
<p style = "margin-right: 10%; border:1px dotted red;">
This demonstrates right margin in 10 percent
</p>
<p style = "margin:15px 5%; border:1px solid black;">
Top and bottom margin will be 15px, left and right margin will be 5%
of the total width of the document--demonstrates shorthand margin property.
</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the various properties used in setting margins using CSS?
Quiz 2: How can you set all types of margins in one declaration? Give examples.
