Question

css 边距问题 margin

为什么给下图盒子1加一个单纯margin-left的数值 盒子1就会向右移动 而单纯给（其他三遍不加margin值）margin-right加个数值的话盒子1不会向右移动呢
margin-left:10px 盒子1向右移动如下图
而margin-right:10盒子1不动呢





Answer 1

margin-right 属性设置元素的右外边距。

1、如图，div1距离div2的右边的距离大于10，所以设置这个属性，不会有变化

其次，就算你设置属性值大于div1距离div2的右边的距离，同样也不会有任何变化。

因为div1在div2的里面，不会超出父级的限制。当然，这里不会超出是指不会向左向上超出。

2、当div2里的元素高宽大于自己会向外溢出，如下图

3、margin-right大多会和   float:right; 向右漂移搭配使用！

 

建议多做几个网页实践一下，做得多了自然就理解了！

望采纳！

Answer 2

　　这位网友你好，你遇到的是Margin垂直外边距合并问题，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

　　垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

　　这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

　　再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的
border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

　　对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。