15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页

解决元素的外边距重叠问题

李家霖| 发布于 2021-07-14 22:03:27| 376阅读| 0点赞| 0评论
举报

代码 

        .box{
			width: 200px;
			height: 200px;
			background-color: #000;
		}
		.box1{
			width: 50px;
			height: 50px;
			background-color: rgb(184, 55, 55);
		}<br/><br/>       <div class="box">
		    <div class="box1"></div>
	    </div><br/><br/>




一个大的元素内部嵌套了小的元素 大小元素中都没有padding与border  这时给子元素设置一个margin-top 

              .box1{
			width: 50px;
			height: 50px;
			background-color: rgb(184, 55, 55);
                        margin-top: 100px;
		}

效果

给子元素设置了margin-top 子元素并没有向下移动   反而是父元素向下移动了    这就是外边距重叠  当一个子元素与父元素的上外边距重叠时就会发生这样的情况   上外边距重叠指的是上外边距中没有padding或border 将父子元素给隔开    




解决方法之一: 

给父元素设置一个border-top 


有了border的父元素的上外边距将不再与子元素重叠  可以避免出现上外边距重叠的问题  同样的使用padding也是可以达到效果  但是这个解决方法会给父元素增加不必要的大小  并不推荐使用  


解决方法二

使用:before伪类  

给父元素设置一个:before   这个伪类表示在指定元素之前添加样式

        .box::before{
			content: "";
			display: table;
		}

在父元素之前添加内容并且将这个内容设置为 table   也是可以完成外边距不重叠  且这样做基本没有副作用




0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部