不要在 CSS 中使用边距

如今，CSS 拥有丰富的工具和属性，可以实现几年前看似不可能实现的设计。许多开发人员专注于学习这种样式语言的每一个细节，这对一些人来说可能相当具有挑战性。

尽管大多数人不认为 CSS 是一种编程语言，但值得注意的是，它也是许多应用程序的一部分。作为开发人员，我们应该负责任地确保我们开发的代码尽可能易于理解、修改和维护。CSS 也不例外。

这篇文章的目的是阐明 CSS 中一个众所周知的属性：margin。我们将讨论它有时不正确的用法，并提出更易于维护和更简洁的替代方法。

❌ 何时不使用

不使用边距的主要原因在于责任问题。在设计应用程序或单个组件的布局时，我们应该考虑谁负责什么。

（为了文章的方便，我们将省略边框样式和其他细节）。

父母与孩子之间

假设我们要实现以下布局。目标是将块定位到如图所示的位置。谁负责将子块与父块保持一定距离：子块还是父块？

父元素应该定义子元素的定位距离。这是关键。责任在于父元素的 block。如果我们想改变父元素的内容，我们可能希望保留子元素与父元素之间的距离，所以这些样式应该由父元素来定义。

.parent {
    padding: 24px;
}

.child {
    /*No margin needed*/
}

当然也有例外。我们可能需要创建一个布局，其中子元素与父元素的距离不相同，如下图所示。

在这种情况下，可以按如下方式进行设计：最后两个元素的父级与第一个元素的父级不同。我们可以创建另一个元素作为最后两个元素的包装器，并将它们的“额外边距”用作填充。

.parent {
    padding: 24px;
}

.wrapper {
    /*Extra padding for the last two children*/
    padding: 24px; 
}

.child {
    /*No margin needed*/
}

注意：显示边框只是为了在代码层面展示块。额外的父块对于应用程序最终用户是不可见的。

兄弟姐妹之间

您可能已经注意到前面布局中的一个细节：子元素之间也是相互分离的。

这种分隔可以通过为所有子元素添加上边距或下边距来实现。然而，我们又回到了同一个问题：谁应该负责分隔子元素呢？令人惊讶的是，应该是父元素。

但是，从父级来看，我们如何才能将子级彼此区分开呢？最好的选择是利用网格布局的强大功能。

这篇文章不会详细介绍这种布局的使用方法。总而言之，网格布局允许我们将元素的子元素视为网格中的元素，并组织它们之间的相对位置。在其选项中，可以确定元素之间的精确距离。如何实现？嗯，通过使用gap属性。

.parent {
    display: grid; /*Changes the display layout to grid*/
    gap: 24px; /*Desired gap between elements*/
    padding: 24px;
}

.child {
    /*No margin needed*/
}

使用此替代方案的主要优点是，该gap属性仅在元素之间添加空格，而不会在开头或结尾添加空格。如果我们要为每个元素使用边距，则需要确保这些边距不会错误地应用于第一个或最后一个元素，以避免不必要的空格。

太棒了！不是吗？

✅ 何时使用

在某些情况下，使用保证金并不是一个坏的选择。

边距：自动

如果元素使用margin: auto，它将相对于其父元素 水平居中。但是，需要注意以下几点：

1. 这仅适用于水平居中元素，不适用于垂直居中。
2. 内联元素（<a/>、<em/>、<span/>等）无法使用此声明居中。它仅适用于块元素。
3. 我们又回到了同样的问题：谁负责使元素居中？在这种情况下，元素将由自身居中，而不是由其父元素居中。
4. 弹性和网格布局中还有其他属性允许垂直和水平居中（justify-content、align-items等），这可能更合适。

尽管存在这些缺点，但有时使用margin: auto比任何其他替代方案都更简单、更快捷，因此这不是一个坏选择。

重叠

当涉及覆盖元素时，使用边距会非常方便。

为了实现上图中的布局，我们可以对子元素（例如）应用负边距margin-left: -120px，使其与父元素重叠显示。

还有其他替代方案，例如position属性，它允许相对于另一个元素定位元素。但是，使用此属性可能会导致子元素不遵循父元素的填充。

在这种情况下，使用负边距更加简单和直接。

希望您觉得这篇文章有趣，并希望它能对您的编程项目有所帮助。以上提到的替代方案只是 CSS 提供的众多选项之一。编程中，没有单一的做事方法。CSS 也是如此。

如果您有任何疑问或想分享任何想法，请在下面发表评论。

感谢您的时间！