爱站程序员基地<!--margin塌陷问题--><!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>/*有的元素初始设置的有值，一开始把所有的 元素设置为0，后期需要再加上*/* {padding: 0;margin: 0;}/*1、父子塌陷======================================================*/.box {width: 160px;height: 160px;background-color: rgb(50, 149, 230);margin-top: 30px;}/*margin父子塌陷当父亲没有设置padding、border、内容时子元素垂直方向的margin会叠加给父亲一旦发生 塌陷，叠加规则，父亲最终垂直方向的 margin以父子中较大的为准，而不是相加解决办法 把儿子的margin转化为父亲的padding给父亲增加一个属性 overflow：hidden*/.inner {margin: auto;width: 80px;height: 80px;background-color: red;margin-top: 60px;}/*2、并列塌陷===============================================垂直方向上相遇的 margin的会发生塌陷，以较大的值为准解决办法 只设置一个方向即可*/.box1,.box2 {width: 100px;height: 100px;background-color: red;}.box1 {margin-bottom: 30px;}.box2 {margin-top: 30px;}</style></head><body><!--1、父子塌陷=========================================================--><div class=\"box\"><div class=\"inner\"></div></div><!--2、并列塌陷=========================================================--><div class=\"box1\"></div><div class=\"box2\"></div></body></html>
CSS-盒子模型之塌陷问题-四
未经允许不得转载：爱站程序员基地 » CSS-盒子模型之塌陷问题-四
