个性化阅读
专注于IT技术分析

有关设置margin外边距没有效果的问题——已解决

点击下载

也许你会遇到过设置margin的时候没有效果的问题。不要心急,也是你还不了解margin,下面为你分析和了解margin的特别以便你能更好的使用它,避免下次再错。

情况一:垂直并列关系

<style>
.box1{
width: 100px;
height: 100px;
background-color:hotpink;
margin-bottom: 50px;

}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin-top: 40px;
}

</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>

连个方块,分别是box1,box2,设置box1的样式为margin-bottom: 50px;设置box2的样式为margin-top: 40px;

margin并列关系-01

结果两个方块之间只有50px,你是不是会想为啥不是90px,因为外边距margin是想外推开,就好像人的手,要碰到东西才能推开,两个人一起伸出手去推对方的身体部分,那两者之间的距离当然是手比较长那一个的距离。

情况二:嵌套关系

<style>
.box1{
width: 200px;
height: 200px;
background-color:hotpink;
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
margin: 50px
}

</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
margin嵌套关系-02

为box2嵌套在box1里面,设置了margin=50px,只见父和子元素都向下移动了50px,而box2向左移动了50px。这种情况是因为父元素和子元素都叠在一起了。可以在父元素添加padding的方法解决。

.box1{
width: 200px;
height: 200px;
background-color:hotpink;
padding-top: 50px
}
.box2{
width: 100px;
height: 100px;
background-color:indianred;
}
padding解决-03
赞(0)
未经允许不得转载:srcmini » 有关设置margin外边距没有效果的问题——已解决

评论 抢沙发

评论前必须登录!