margintop和marginbottom，padding margin
本篇文章给大家谈谈margintop和marginbottom，以及padding margin对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
marginbottom属性 margin属性是什么意思
margin属性是CSS中的一个外边距属性，用于设置元素边框外侧到相邻元素边框内侧之间的距离。以下是关于margin属性及其子属性margin-bottom的详细解释：
1. margin属性
定义：margin是CSS语法中的一个简写属性，用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。作用：控制元素与其他元素之间的空间距离，实现页面布局和元素间距的调整。写法：可以分别设置上、右、下、左四个方向的外边距，如margin-top、margin-right、margin-bottom、margin-left。也可以使用简写形式，如margin: 10px 20px 30px 40px;，分别表示上、右、下、左的外边距。如果简写形式中只给出两个值，则第一个值表示上下外边距，第二个值表示左右外边距；如果只给出一个值，则该值将应用于所有四个方向。2. margin-bottom属性
定义：margin-bottom是margin属性的一个子属性，专门用于设置元素的下外边距。作用：控制元素底部与其他元素顶部之间的空间距离。写法：直接给出具体的数值和单位，如margin-bottom: 20px;，表示元素的下外边距为20像素。3.注意事项
块级元素的垂直相邻外边距会合并，即如果两个块级元素垂直相邻，并且它们都有外边距，则这两个外边距会合并为一个外边距，其大小为两者中较大的一个。行内元素实际上不占上下外边距，即设置行内元素的margin-top和margin-bottom属性是无效的。综上所述，margin属性是CSS中用于控制元素间距的重要属性，而margin-bottom属性则是专门用于设置元素下外边距的子属性。通过合理使用这些属性，可以实现灵活的页面布局和元素间距调整。
CSS中margin和padding的区别
盒模型的外边距和内边距：
margin是对外的，padding是对内的。
margin在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。
2.margin样式的简写方式，padding同理：
例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
例子 4
margin:10px;
所有 4个外边距都是 10px
子元素的margin-top属性为什么会影响父元素的margin-top
问题
最近在开发中偶然遇到了一个问题那就是如下图：父级元素是个空的最外层包裹元素，子元素是内容，想控制子元素不从页面顶端开始，就给子元素设置一个margin-top：50px;没想到父元素也随之下移了。我们只知道相邻元素如果既有margin-bottm又有margin-top会产生margin塌陷，但是这又是为什么呢？
原因探索：
解读规范可知：相邻两个元素的margin会折叠（相邻包括兄弟元素也包括抚子元素），但是仍需满足以下几个条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个 BFC当中。
*没有线盒，没有空隙（ clearance，下面会讲到），没有padding和border将他们分隔开
*都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
*元素的margin-top与其第一个常规文档流的子元素的margin-top
*元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
*height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
解决办法：
根据以上原因分析可知，我们只需打破它合并的规则即可解决该问题：比如给子元素设置float/position属性使其脱离文档流，或者给父元素设置border／padding然后将其box-size属性设置为border-box/padding-box等等
如果你还想了解更多这方面的信息，记得收藏关注本站。