浅析CSS中的margin属性

最新推荐文章于 2023-09-19 08:09:14 发布

蓝色的小叶子

最新推荐文章于 2023-09-19 08:09:14 发布

阅读量701

点赞数 3

分类专栏： css(3)

本文链接：https://blog.csdn.net/BlueDreamerr/article/details/96464677

版权

css(3) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学过一定css的人都知道，css里面有个盒模型，margin作为盒模型的重要组成部分，我们很有必要把它搞懂！

那什么是margin呢？简单点来说，在同辈元素之间的就是元素到元素之间的距离，在父子元素之间就是子元素到父元素边框之间的距离。

margin属性可以设置四种值：auto（浏览器计算外边距）、length（规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px）、%（规定基于父元素的宽度的百分比的外边距）、inherit（规定应该从父元素继承外边距。）其中length是用的相对最多的，我们看下值的类型为length时候，我们该怎么使用它。

length可以指定1-4个值，具体如下：

接下来说下margin在不同场合下的使用

1.在同级元素水平方向使用时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的两个盒子</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
body{
font-size: 0;
}
.left{
width: 100px;
height: 100px;
background: red;
display: inline-block;
margin-right: 50px;
font-size: 20px;
}
.right{
width: 100px;
height: 100px;
background: yellow;
display: inline-block;
margin-left: 50px;
font-size: 20px;
}
</style>
</head>
<body>

<div class="left">宽为100px,右边距为50px</div>
<div class="right">宽为100px,左边距为50px</div>
</body>
</html>

如图所示

解释：当margin用在同级元素的时候，在水平方向两个盒子的距离等于左边盒子的右外边距和右边盒子的做外边距之和

2.在同级元素垂直方向使用时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin的应用-垂直方向的两个盒子</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
.top{
width: 200px;
height: 200px;
margin-bottom: 120px;
background: pink;
}
.bottom{
width: 200px;
height: 200px;
margin-top: 60px;
background: green;
}
</style>
</head>
<body>

<div class="top">高为200px,下边距为120px</div>
<div class="bottom">高为200px,上边距为60px</div>
</body>
</html>

效果如图所示：

解释：同级元素在垂直方向的margin等于两个元素之间值更大的那个

3-1.在父级元素中使用时（无padding）

我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的距离

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{padding:0; margin:0; border:0;}

.father{
width: 500px;
height: 500px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;
margin-left: 100px;
}
</style>
</head>
<body>

<div class="father">
<div class="son">高度为100px，margin-top为100px。</div>
</div>

</body>
</html>

如图所示：

解释：通过设置margin-left来控制子元素的左边框和父元素的左边框之间的距离-

3-2.在父级元素中使用时（有padding）

在有padding的情况下，子元素到父元素边框的距离等于，margin值+padding值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{padding:0; margin:0; border:0;}
.father{
width: 500px;
height: 500px;
padding:100px;
background: red;
}
.son{
float: right;
width: 100px;
height: 100px;
background: green;
margin-right: 100px;
}
</style>
</head>
<body>

<div class="father">
<div class="son">宽度为100px，margin-right为100px。</div>
</div>
</body>
</html>

如图所示：

解释：子元素的到父元素右边框的距离等于，子元素的margin-right+父元素的padding-rigth

3-2.在父级元素中使用（垂直方向）时

当父元素没有设置padding值或者border值时设置子元素的margin-top会使父元素一起向下偏移

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{padding:0; margin:0; border:0;}

.father{
width: 500px;
height: 500px;
background: red;

}
.son{
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
}
</style>
</head>
<body>

<div class="father">
<div class="son">高度为100px，margin-top为100px。</div>
</div>

</body>
</html>

在这里，我们本来希望子元素到父元素的垂直方向有100px的距离，但是结果成了到窗口100px，有什么解决办法吗？

办法很多，我这里只说两种方式，1.给父元素设置边框，如 border:1px solid #ccc 2.给父元素设置overflow:hidden

css代码如下（父元素设置overflow:hidden）：

最终结果：

蓝色的小叶子

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
浅析CSS中的margin属性

学过一定css的人都知道，css里面有个盒模型，margin作为盒模型的重要组成部分，我们很有必要把它搞懂！那什么是margin呢？简单点来说，在同辈元素之间的就是元素到元素之间的距离，在父子元素之间就是子元素到父元素边框之间的距离。margin属性可以设置四种值：auto（浏览器计算外边距）、length（规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px）、%（规定基于父...
复制链接

扫一扫