margin在div块嵌套和垂直排列时特性

来源：互联网发布：微信小说分销系统源码编辑：程序博客网时间：2024/06/04 13:48

margin的使用在html5布局中较为广泛，本文主要分析了margin在两个块元素垂直方向上排列的特点、两个块元素嵌套使用margin时产生的问题和解决办法。

1.语法

.margin-top:上边距;

margin-right :右边距;

margin-bottom :下边距:

margin-left :左边距:

或复合写法：顺序为上右下左逆时针

margin：10px;表示对上下左右边距都是10px

margin：10px 20px;第一个值表示上下，第二个值表示左右

margin：10px 20px 30px;第一个表示上top，第二个表示右right和右left，第三个表示下bottom

margin：10px 20px 30px 40px;按照上右下左的顺序分别对应值

2.特性

2.1垂直方向的两个块标签之间的margin值取较大的一方

举例说明：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.test1{width: 100px;height: 100px;background: green;margin: 10px;}.test2{width: 100px;height: 100px;background: blueviolet;margin: 20px;}</style></head><body><div class="test1">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</div><div class="test2">岱宗夫如何，齐鲁青未了，造化钟神秀，阴阳割昏晓。</div></html>

产生效果：

2.2块元素嵌套一个块元素时margin-top会去父元素和父元素嵌套的子元素中的值大的一方

举例说明：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}.div1{width: 300px;height: 300px;margin: 10px;background: wheat;}.test1{width: 100px;height: 100px;background: green;margin: 20px;}</style></head><body><div class="div1"><div class="test1">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</div></div></html>

产生效果：

可见，父元素div1距离顶端距离取的是子元素.test1的margin值，若把div1的值和.test1的margin值替换一下，产生效果如下：

此时父元素.div1的margin-top值依然是20px。

针对这种情况，有三种解决办法，分别为给父元素加上边框、把子元素的margin换上父元素的pading、给父元素加上overflow:hidden;

三种解决代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;background: aqua;}/*一.给父元素加上边框*/.div1{width: 300px;height: 300px;margin: 20px;background: wheat;border: 1px solid blue;}.test1{width: 100px;height: 100px;background: green;margin: 10px;}/*二.给子元素的margin值换成父元素的padding，*/.div2{width: 300px;height: 300px;margin: 20px;padding:10px ;background: wheat;}.test2{width: 100px;height: 100px;background: green;}/*三.给加上父元素的overflow:hedden*/.div3{width: 300px;height: 300px;margin: 20px;padding:10px ;background: wheat;overflow: hidden;}.test3{width: 100px;height: 100px;background: green;}</style></head><body><div class="div1"><div class="test1">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</div></div><hr /><div class="div2"><div class="test2">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</div></div><hr /><div class="div3"><div class="test2">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</div></div></html>

来看一看效果：

可见三种解决方法具有相同的效果。

1 0