css定位:子元素外边距

CSS学习系列

CSS子元素外边距

CSS子元素外边距:使用CSS定位的时候,可能会遇到的问题就是子元素的外边距不能像达到期望,导致外间距显示的很奇怪,学习如何让子元素外边距显示正确。块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。

1、wrapper
margin:30px auto;
background:black;

2、添加子元素:
child_one
width:500px;
background:blue;
margin-top:25px;

解决:
1、parent元素添加overflow:auto;
2、child_one元素
1、display:block;
1、inline是正常的文本显示;
2、inline block既像block,又像inline;
显示left,因为它的行为就像text文本,因为我们设置margin不再生效;
因为block和inline block用text设置来代替margin;
选择parent元素,text-align:center;
3、在parent元素添加border让margin生效
1、border-top:1px solid;
2、padding-top:1px;

Last modified: 2019年9月9日

Previous Story

CSS学习系列

css定位:四种定位类型

css四种定位:CSS最基本的定位元素是position,学习CSS中的四种定位类型,使用时的外观以及它们的工作原理。

...

Next Story

CSS学习系列

css特效:css裁剪和css遮罩

css裁剪(css clip):从Web标准中删除,css遮罩(css mask)隐藏一个元素的可见区域,除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。

...