外边距合并可能产生的问题

简介: 外边距合并可能产生的问题

外边距合并可能产生的问题,可能会出现合并和塌陷问题

1、这种现象,先要准备两个盒子:

 

2、 父元素往下走了20px

3、让孩子也走一走

4、父元素和子元素同时存在了margin的情况,就会出现塌陷的情况产生,不能都使用margin:

5、如何让子盒子能够下来,给父元素指定一个边框就可以避免这种情况的产生

 

没给边框定义前的效果:

给了上边框就可以下来了

6、建议把边框改成透明效果

7、第二种方法消除同时使用margin会塌陷的效果,定义上内边距

8、第三种方法添加overflow:hidden,也可以解决问题      

相关文章
|
8月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
42 2
|
8月前
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
|
8月前
|
前端开发
CSS 什么是外边距重叠?重叠的结果是什么?
CSS 什么是外边距重叠?重叠的结果是什么?
|
2月前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
57 2
|
2月前
在使用 Flexbox 布局实现自适应宽度的品字布局时,子元素的排列顺序是否可以调整?
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时,可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序,以满足不同的设计和布局需求。
|
6月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
134 2
|
8月前
|
前端开发
Margin - 单边外边距属性
Margin - 单边外边距属性。
54 1
元素居中的几种方式
元素居中的几种方式
73 0
行内块元素之间为什么会有间隙?怎么去除?
行内块元素之间为什么会有间隙?怎么去除?
177 0