热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

内外边距对行内元素块级元素的影响

1、内边距对父级元素的影响当块级元素里面还是块级元素且没有定义宽高时,子块级元素的内边距会将父块级元素撑开;但是当子元素为行内元素的时候,内边距对父级元素是无影响的。如下例

1、内边距对父级元素的影响

当块级元素里面还是块级元素且没有定义宽高时,子块级元素的内边距会将父块级元素撑开;

但是当子元素为行内元素的时候,内边距对父级元素是无影响的。

如下例:

div和span的内边距对父级div的影响


	
		
		
		
	
	
		
这是一段测试文本
这是一段测试文本
当腹肌元素限定了宽高时,子元素的内外边距对父级元素都无影响,但是会出现溢出的情况。

2、外边距的特殊情况:

想要实现子元素在父元素中分离:


使用margin-top后却是下面的效果:


这就是在(1)、第一个子元素的外边距(2)、父级元素无边框等的遮挡时会出现的情况。

解决办法:

(1)、给父级元素添加透明边框,但是会影响父级元素的尺寸,若想保持原有的尺寸,应在原有尺寸上减去边框的尺寸;

(2)、父级元素添加

空元素。


	
		
		
		
	
	
		





推荐阅读
author-avatar
Paul_Zhao
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有