css边距和定位布局_如何理解和使用CSS边距

css边距和定位布局

CSS gets a bad rap for not behaving the way people expect. One of the things that throws people off the most are margins. They seem so simple, yet they have the potential to cause some really strange issues.

CSS表现不佳，表现不佳。 让人们受益最多的事情之一是利润。 它们看起来很简单，但是有可能引起一些非常奇怪的问题。

For people just getting into CSS, it's easily one of those things that can get you thinking "this is a stupid language that makes no sense!"

对于刚接触CSS的人来说，很容易使您想到“这是一种毫无意义的愚蠢语言！”。

I see it everyday – both in the classroom as people try to figure out their spacing issues and in my YouTube comments sections as well.

我每天都在教室里看到这一点，因为人们试图找出他们的间距问题，在我的YouTube评论部分也是如此。

In a way, margins are bit of a microcosm of CSS in general. CSS seems so simple with its property: value pairs, but as you progress with it, you realize that there is a lot going on.

从某种意义上说，页边距通常只是CSS的缩影。 CSS的property: value对看起来很简单，但是随着它的发展，您会意识到有很多事情要做。

Margins also seem so simple. Add some margin, and you add some empty space around that element. But then suddenly they behave a little differently in one situation than another, or you add some margin-top to a child element, and instead it's the parent that moves down.

利润似乎也很简单。 添加一些边距，然后在该元素周围添加一些空白区域。 但是突然之间，它们在一种情况下的行为与另一种情况有所不同，或者您在子元素上添加了一些页margin-top ，而是父元素向下移动。

Frustration ensues.

挫败感随之而来。

In this article, I hope to shed a little light on how margins work. We'll look at some of the common problems that happen, as well as simple solutions to those issues.

在本文中，我希望对利润率的工作原理有所了解。 我们将研究发生的一些常见问题，以及针对这些问题的简单解决方案。

To go over all this, I'll be using examples from my Responsive Web Design Bootcamp over on Scrimba, which I pulled this simple layout from:

为了解决所有这些问题，我将使用Scrimba上响应Web设计Bootcamp中的示例 ，该示例从以下简单布局中提取：

保证金是多少？ (What are margins anyway?)

Before we really jump into the deep-end here, I want to make sure we all know what margins actually are!

在我们真正涉足这一领域之前，我想确保我们都知道实际的利润空间！

I'm going to assume that we all know that margins are part of the box model, with margin being all the way on the outside, coming after the content itself, the padding and the border.

我将假设大家都知道边距是盒子模型的一部分，边距一直位于外部，紧随内容本身，填充和边框之后。

The MDN explains them really well (emphasis mine):

MDN很好地解释了它们(强调我的意思)：

The margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.

页边距是最外层，将内容，填充和边框包装为此框与其他元素之间的空白 。 可以使用边距和相关属性来控制其大小。

In other words, it's effectively empty space that we can use to create space between one box and another in our layout.

换句话说，实际上是空的空间，可用于在布局中的一个框和另一个框之间创建空间。

处理用户代理样式表