外边距内边距

48 阅读 0 评论 32 点赞

我是靠谱客的博主多情火，最近开发中收集的这篇文章主要介绍外边距内边距，觉得挺不错的，现在分享给大家，希望可以做个参考。

<!--

结构关系：嵌套元素的垂直外边距塌陷

问题描述：当父元素没有padding，margin，border，子元素与父元素直接相邻，子元素的margin值会传递给父元素

并且与父元素的margin值发生合并最终现实的结果取他们两者之间的的最大值，负值取绝对值的最大值

解决方法：

1.给父元素设置边框和内填充（慎用）

2.给父元素添加 overflow:hidden; 作用：改变了渲染规则

/* 结构关系：相邻元素的垂直外边距会合并

问题描述：当两个块级兄弟元素的垂直外间距直接相遇的时候，会发生合并

绝对值的较大值：

解决方法：

1.尽量只定义其中一个盒子的margin值。

2.给其中一个盒子加上父元素，overflow:hidden; 改变渲染规则

本身属性为 display:block;的元素都是块级元素

display:inline;的元素都是行级元素

display:inline-block;的元素都是行内快元素

以上就是多情火为你收集整理的外边距内边距的全部内容，希望文章能够帮你解决外边距内边距所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。