内联CSS中是否可以使用margin/padding？

Question

为了利用缓存、标记和设计的分离以及更好的概览等优点，最佳实践是将所有样式放在外部CSS文件中。

然而，我通常会遇到这样的问题：元素应该看起来相同，即具有相同的类，但由于构成差异需要在位置上不同，例如需要由于组合差异需要不同的边距或填充。

我想到了三个选项：

选项1：将外观样式与位置样式（边距/填充）分开，将它们放在单独的类中，根据需要进行组合。

.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }

选项2：复制类，相应地重命名并将每个差异保留在自己的类中。

.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }

选项 3：使用内联样式声明不同的边距/填充。

<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">

拥有

.myClass { ...; margin: 10px 0px; }

我的常识告诉我要使用选项1，并根据父/子结构级联差异。但这通常会变得非常混乱，尤其是对于阅读CSS的其他开发人员而言。因此，我尝试了选项3（只有一些外部margin/padding），这似乎效果不错。

我仍然感到有些奇怪的压抑感。有很多人告诉我不要使用内联样式。通常我会说“无论哪种方式都行”，但最近我意识到内联margin/padding可能会对网站的渲染过程产生影响，导致“跳动块”。我不确定这个效果是否真的是由于样式处理顺序引起的，还是其他一些讨厌的事情发生了，我猜。

有什么建议吗？

- Alex

---

这完全取决于你的HTML，但如果需要对.myClass元素中的第一个进行不同的样式设置，则可以选择使用div.myClass:first-child。或者，可能是h1 + div.myClass（假设它跟在一个h1元素后面）。 - David Thomas

@David Thomas：听起来这会是一个不错的答案。 - BoltClock

@BoltClock：作为写作者，这个问题无法被正式回答（因为它纯粹是猜测，并且没有定义使用案例）。如果有HTML可供查看，那么我可能会回答那个（或类似的）。 - David Thomas

@David Thomas：嗯，你说得有道理。 - BoltClock

Answer 1

我的个人偏好是使用“间隔类”，例如：

.default-row-spacer{
    margin-bottom:10px;
}
.default-spacer{
    margin-right:10px;
}
.large-row-spacer{
    margin-bottom:20px;
}

然后我这样使用它们：

<div class="panel default-spacer default-row-spacer">
    <div class="content default-row-spacer">
    </div>
    <div class="content default-row-spacer">
    </div>
</div>
<div class="right-panel default-row-spacer">
</div>

这使得我以后可以更改整个网站的边距，同时保持网站的外观和感觉不变。

- Artless

Answer 2

这取决于您的问题,

如果您需要经常执行此操作并且值之间的差异不太大，或者可以将其封闭为“前10个边距”，则制作额外的类可能会很有用。

.tTwenty { margin-top:20px;}
.bTwenty {margin-bottom:20px;}

并像这样添加它们。

<div class="myClass tTwenty">
<div class="myClass">
<div class="myClass bTwenty">

但是您提供的所有解决方案都有效，只是在处理上略有不同。但是您不应该开始使用内联样式，因为您会依赖它们并开始使用内联CSS修复每一个小问题，这样当您在一年后查看时，就需要混合外部CSS和内联样式来理解样式，并且需要触及每个带有内联样式的文档，而不是在CSS文件中修复所有内容。

- john Smith

---

不要给你的类取名为“二十十”，否则，如果有一天你觉得“22”很酷…… - Roko C. Buljan

希望我能给你的评论点赞更多，@roXon。不要以包含的属性命名你的类。 - Seer

@Seer 连 .clear-fix 都不行吗？ - John Dvorak

嗯，那个措辞应该表达得更好一些。Clearfix是一个奇怪的例外，因为你很少需要改变一个清除浮动类的功能。还会有其他的例外情况，但大多数时间使用像.tTwenty这样的东西都是不好的选择。我相信你明白为什么，也很高兴你指出了这些例外情况。 - Seer

当然，你是正确的，随意编辑。我写下这个条件是因为你有你的前十个边距，你也可以将case1称为case2或其他任何名称，无论如何，最好的情况是更好地设计东西以进行统一分类。 - john Smith

Answer 3

我曾经在开发一个几乎所有内容都是动态生成的电商网站时遇到了这个问题。因为大部分内容块都被重复使用，所以我不能将它们样式化，因为我想以不同的方式样式化不同的块，这与你所注意到的类似。

最终我使用 Chrome 的检查元素功能来找出 div 和 class 的层级关系，然后做出以下操作：

选项 4：

.myClass { ...; }
.thumbnail .myClass { margin-top: 20px; }
div.leftCol .myClass { margin: 10px 0px; }
footer .myClass { margin-bottom: 20px; }

在我看来，这种选项的好处不仅可以享受选项1的所有优点，而且您无需添加新的类，CSS仍然非常结构化和易读。

- Raphael Rafatpanah

Answer 4

经验法则是：如果需要重复执行某项任务，例如列出评论，每个评论都有一个正文，距离标题下方40像素，请使用CSS类。如果只是一次性的事情，比如只有一个对象，请使用内联方式。

- SoWhat