Home > Article > Web Front-end > What are the css margin properties? What are their uses? (detailed explanation)
What are the css margin properties? What are their uses? (detailed explanation)
- 藏色散人Original
- 2018-08-30 14:36:573505browse
When we are laying out the web page, I believe that friends who have done page design know that the margin attribute is a very important style attribute in CSS. So some novices may ask what the margin attribute is?
Margin in css style is the outer margin and spacing attribute in css. As the name suggests, it controls the top, bottom, left, and right distances between div blocks or elements. Obviously, the role of margin in css cannot be underestimated. This article will introduce the specific usage of css margin property to novices. I hope to be helpful.
Below we explain in detail through specific code examples
margin attribute in css, that is, css margin attribute specific usage code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的margin属性使用示例</title>
<style>
.demo{
width: 300px;height: 100px;
background-color: #ccccff;
}
.demo1{
margin-left:50px;
margin-top: 50px;
margin-bottom: 50px;
width: 300px;height: 100px;
background-color: #b2ecef;
}
.demo2{
width: 300px;height: 100px;
background-color: #94ef9a;
}
.demo1 p{margin-left: 50px;
}
</style>
</head>
<body>
<div class="demo">
<p>没有给这个div块设置margin值</p>
</div>
<div class="demo1">
<p>给这个div块设置了margin值,并且给此段文字也设置margin值</p>
</div>
<div class="demo2">
<p>没有给这个div块设置margin值</p>
</div>
</body>
</html>The above code renders in the browser as shown below:
From the picture we can find that the margin value is set for the element Afterwards, the spacing between the div blocks changed. In div block demo1, after setting the style attribute of margin-left, the element moved 50 pixels from the left side of the browser. After setting margin-top, the element also moved 50 pixels from the div block above it, and then added The margin-bottom style attribute moves the top border of the div block below by 50 pixels, and the div block demo1 uses this to generate the top, left, and bottom margins. At the same time, after we also added the margin-left style attribute to the second paragraph of text, the text moved 50 pixels from the left border of the div in demo1 and created an outer margin.
The margin value can be selected from up, down, left, and right. Of course, if we directly add margin: 50px; this attribute to the div, the above effect can also be achieved. Because when you add only one value to margin by default, it is equivalent to the same value for the distance on all four sides. Or we add margin: 50px 50px 50px 50px; in this case, this is equivalent to the subdivided margin-top, margin-right, margin-bottom, and margin-left in CSS; the default is that the outer margins of the top, right, bottom, and left are Clockwise direction.
Then the above is an introduction to the specific usage of the margin attribute in css style, which is also the specific usage of the margin attribute in css. It has certain reference value. I hope it can be useful to those who need it. Friends help!
The above is the detailed content of What are the css margin properties? What are their uses? (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!