如何修复折叠的顶部和底部边距? [英] How to Fix Collapsing Top and Bottom Margins?

问题描述

我是CSS的新手，我试图了解如何解决以下问题，以免出现上下限.但是，它可以很好地满足边距的需求:

I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:

.contents {
    ...
    margin: 10px 10px 10px 10px;
}

示例: http://jsfiddle.net/LCTeU/

我该如何解决?

我也尝试过填充容器，这只是将容器扩展到最大大小(为什么?):

I've also tried padding the container instead, and that just expands the container to maximum size (why?):

.container {
    ...
    padding: 10px 10px 10px 10px;
}

推荐答案

此答案基于您提供的小提琴.

This answer is based off of the fiddle you provided.

我认为您的方法是不正确的，因为您在article上加了一个边距，以在父div标记内将其隔开.在这种情况下，最好使用填充，因为您尝试将内容与其外部边界分开.因此申请:

I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:

article {
  //display: block;
  clear: both;
  padding: 10px;
}

这将导致article标记的大小增加，但是容器div元素的边框现在将被触摸.要在元素之间创建空间，请使用margin.

This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

工作示例 http://jsfiddle.net/LCTeU/4/

所以回顾一下，当您要在两个元素之间创建空间时，请使用margin.如果要在元素与其边框之间创建空间(或希望元素被空白包围)，请使用padding.

So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.

这篇关于如何修复折叠的顶部和底部边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！