大家好。我的名字是边缘。人们经常把我和我的兄弟帕丁混淆。在这里，我将详细介绍一下我的主要工作。
通常有助于在某些元素之间创建距离。首先，让我们看一下一些代码。
!--HTML结构--div class='boxA'a/divdiv class='boxB'b/divstyle /* css改变*/div{width: 200px;height: 200px;} .boxA{background: papelvioletred;} .boxB{background: Royalblue;}/style 写的两个DIV元素是从上到下显示的。这就是上图所示的效果。在这里您可以看到a 的底部和b 的顶部靠得很近。如果您愿意，您还可以将它们移得更远一些，以添加更多空白。
style /* css 改变*/div{width: 200px;height: 200px;} .boxA{background: papelvioletred;margin:20px;} .boxB{background: Royalblue;}/style
为什么会出现这种情况？ 本来只是想在下面留点距离，为什么感觉不一样呢？写法有很多种，我们先来研究一下各种写法。
首先，我刚才写的是margin:20px，但是如果后面再写这个值，就会在上、下、左、右四个方向上增加20像素的距离。
如果写入两个值，第一个值代表垂直距离，第二个值代表水平距离。
写出三个值。第一个值代表顶部，第二个值代表左侧和右侧，第三个值代表底部。
写出代表四个方向的四个值：上、右、下、左。
请参阅下面的图例。
其实我就是这么写的，不过你也可以用margin-top、margin-left、margin-right、margin-bottom这样单向写。
div{宽度： 60px;高度： 60px;}.boxA{背景：淡紫色；margin-left :10px;} /*left*/.boxB{背景： margin-right :10px;} /*right* /.boxC{背景： green;margin-bottom :1 0px;} /*Bottom*/.boxD{background: Orange;margin-top:10px;} /*Top*/ 如上图
元素A，距左侧10像素；
元素B 距右侧10 像素（但浏览器默认为左对齐，因此这里看不到效果）。
元素C，向下10 像素
元素D，上方10 像素
ETC？ 好像有什么不对劲吗？
看起来C和D之间只有10个像素，而不是我预期的20个。
好吧，我承认，这是我的问题。
如果元素是垂直方向的（水平方向是正常的）并且两个元素分别设置了margin-top 和margin-bottom ，那么这两个距离不会重叠，但它们确实重叠在一起。
这可能不符合您的期望。以后写的时候请注意
通常，像这样设置到元素的距离就足够了：
style /* css 改变*/div{width: 200px;height: 200px;} .boxA{background: Palevioletred;margin-bottom:20px;} .boxB{background: Royalblue;}/style 这样使得a和b之间的距离可以得到它。如果你想拉近两个人的距离，你会这么做吗？
要实现这一点，只需写一个像这样的负值
style /* css 变化*/div{width: 200px;height: 200px;} .boxA{background: fadevioletred;margin-bottom:-50px;} .boxB{background: Royalblue;}/style 看，我好强大！同时还存在一个小错误，即两个元素嵌套。
例如：如果你这里有一个元素，里面又放了另一个元素，你可以看到，在里面的一个小元素上写margin-top 是没有效果的。
!--HTML结构--div class='wrap' div class='box'/div/div样式/* css变化*/.wrap{width:200px;height: 200px;background: #ccc;} .box{width: 100px height: 100px;background:pink;}/style 不加边距时的效果
上面是不加margin-top的效果。 我们来看看粉色块添加margin-top后的效果。
style /* css 更改*/.wrap{width:200px;height: 200px;background: #ccc;} .box{width: 100px;height: 100px;background: Yellow;margin-top:20px;}/style :010 - 69509 有点不同超乎你的想象来自事物？ 相同的？
这个问题的解决办法是：
1）将overflow:hidden添加到父元素。
2）给父元素添加border和padding属性。
3）使其中一个元素浮动
可以添加overflow:hidden看看效果
样式/* css 更改*/.wrap{width:200px;height: 200px;background: #ccc;overflow:hidden;} .box{width: 100px;height: 100px;background: Pink;margin-top:20px;} /style 010- 69510好的，这个小问题完美解决了漏洞。
结论是
人们喜欢叫我Margin，但我的主要功能是控制元素之间的距离。这就是今天的全部内容。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。