设置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;

结果:

img

结果两个方块之间只有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>

 

img

为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;

}

img

本文为博主原创文章,知识共享,开源精神,转载注明出处。