当前位置: 首页 > Web前端 > HTML5

CSS边距重叠的解决方法

时间:2023-04-05 20:11:28 HTML5

**Css防止边距重叠的方法**今天整理了几种使用CSS防止边距重叠的方法。我们假设一组dom结构

通常情况下,如果为子元素设置margin,这个属性对父元素,但这不是我们想要的结果,我们只想在子元素上设置外边距,那怎么办呢?(1)为父元素设置边框。parent{width:300px;高度:300px;border:1pxsolid#ccc;}.child{width:200px;高度:200px;margin:20px;}(2)添加到父元素padding.parent{padding:1px;宽度:300px;高度:300px;}.child{宽度:200px;高度:200px;margin:20px;}(3)在子元素上方添加一个宽高的兄弟元素,记住Living是宽高的。
(4)设置溢出:隐藏;父元素的属性。父母{溢出:隐藏;宽度:300px;高度:300px;}.child{宽度:200px;高度:200px;margin:20px;}(5)为子元素设置显示:inline-block;(如果子元素是行内元素或者行内块级元素,就不会有边距重叠的问题)。父母{宽度:300px;高度:300px;}.child{宽度:200px;高度:200px;边距:20px;display:inline-block;}(6)让子元素脱离文档流的方法有很多,比如浮动、绝对定位等,这里不做具体说明。希望能帮到需要的人。如果您觉得本文对您有帮助,请给我一个赞!嘿嘿