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;

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年9月9日

Previous Story

CSS教程

css定位:四种定位类型

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

...

Next Story

CSS教程

第四节 CSS边框颜色

现在你的网站的颜色和背景的主要元素已经被添加,所以现在是时候添加一些更精细的。 在本课中,您将学习如何控制设计 …

...