The margin property is used to create space around an HTML element.
It can be set for all four sides of an element (margin: 10px;), for specific sides (margin-top: 10px;), or for opposite sides (margin: 10px 20px; sets top/bottom margins to 10px and left/right margins to 20px).
The value of margin can be specified in pixels, ems, rems, or percentages. It is a commonly used property in CSS for creating layout and spacing.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</body>
</html>
Our simple experimental html.
p {
border-style: solid;
border-width: 20px;
margin: 25px;
}
The margin property creates space outside of the element's border. In this case, a margin of 25 pixels will be added to all four sides of the paragraph element, effectively creating a gap between the element and its surrounding content.
p {
border-style: solid;
border-width: 20px;
margin-top: 100px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 100px;
}
The margin property can take different values for each side of the element by specifying values for margin-top, margin-right, margin-bottom, and margin-left.
p {
border-style: solid;
border-width: 20px;
margin: 100px 50px 100px 50px;
}
In this case, the margin property has four values specified in a shorthand notation, which represent the top, right, bottom, and left margins respectively.
The values are in the order of top, right, bottom, and left. So, the margin property is setting a 100-pixel margin at the top and bottom of the element and a 50-pixel margin on both the right and left sides.
No comments:
Post a Comment