html 边框重叠问题,详解css边距重叠的几种解决方案

今天整理了一下用css防止边距重叠的几种方法

先假设一组dom结构

通常情况下，如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果，然而

这其实不是我们想要的结果，我们只想对子元素设置margin，那么现在我们应该怎么做呢？

(1) 给父元素设置边框

.parent {

width: 300px;

height: 300px;

border: 1px solid #ccc;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

}

(2)给父元素添加padding

.parent {

padding： 1px;

width: 300px;

height: 300px;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

}

(3)在子元素上方加一个有宽高的兄弟元素，记住是有宽高的。

(4)给父元素设置 overflow: hidden; 属性

.parent {

overflow: hidden;

width: 300px;

height: 300px;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

}

(5)给子元素设置 display: inline-block；(如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题)

.parent {

width: 300px;

height: 300px;

}

.child {

width: 200px;

height: 200px;

margin: 20px;

display: inline-block;

}

(6)使子元素脱离文档流这个实现的方法有很多，浮动，绝对定位等，这里我就不做具体的解释了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html 边框重叠问题,详解css边距重叠的几种解决方案相关推荐

html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
详解css外边距折叠（margin collapsing）
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下前文这是的一个经典的老 ...
html盒子边框内部线条,详解CSS从条纹边框的实现盒子模型的方法
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS属性,赶紧去补习一下吧. 2.类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 p: 定义 ...
js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
详解CSS display:inline-block的应用（转）
详解CSS display:inline-block的应用阅读目录基础知识 inline-block的问题 inline-block的应用总结本文详细描述了display:inline-blo ...

html 边框重叠问题,详解css边距重叠的几种解决方案

html 边框重叠问题,详解css边距重叠的几种解决方案相关推荐

最新文章

热门文章