Html 边距/填充是否可以作为内联 CSS 接受？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16252255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is margin/padding acceptable as inline CSS?
提问by Alex
It's best practise to have all the styling in an external CSS file to take advantage of caching, separation of markup and design, better overview etc.
最好的做法是将所有样式都放在一个外部 CSS 文件中，以利用缓存、标记和设计的分离、更好的概述等。
However, I usually ran into the problem that elements are supposed to look the same, i.e. have the same class(es), but need to differ in position, e.g. require a different margin or padding due to composition differences.
然而，我经常遇到的问题是元素应该看起来相同，即具有相同的类，但需要在位置上不同，例如，由于组成差异需要不同的边距或填充。
I thought of three options:
我想到了三个选择：
Option 1: Split appearance styles from position styles (margin/padding), have them in separate classes and combine them as needed.
选项 1：从位置样式（边距/填充）拆分外观样式，将它们放在单独的类中并根据需要组合它们。
.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }
Option 2: Duplicate classes, rename them accordingly and keep every difference in its own class.
选项 2：复制类，相应地重命名它们并保留其自己的类中的每个差异。
.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }
Option 3: Use inline style to declare different margin/padding.
选项 3：使用内联样式声明不同的边距/填充。
<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">
having
有
.myClass { ...; margin: 10px 0px; }
My common sense tells me to use Option 1 and cascade differences depending on the parent/child structure. But this usually ends up pretty confusing, especially for other developers reading the CSS. So I tried Option 3 (having just a few external margin/padding) and that seems to work pretty well.
我的常识告诉我根据父/子结构使用选项 1 和级联差异。但这通常最终会令人困惑，尤其是对于阅读 CSS 的其他开发人员。所以我尝试了选项 3（只有一些外部边距/填充），这似乎工作得很好。
I still feel bad about it in some strange way. There are so many people telling not use inline style. Usually I'd say "whatever works best", but recently I realized that inline margin/padding might have impact on the rendering process of the website, causing "dancing blocks". I'm not sure if this effect is really caused by the processing order of styles or rather some other nasty things going on there, I guess.
我仍然以某种奇怪的方式对此感到难过。有很多人告诉不要使用内联样式。通常我会说“什么是最好的”，但最近我意识到内联边距/填充可能会对网站的渲染过程产生影响，从而导致“跳舞块”。我不确定这种效果是否真的是由样式的处理顺序引起的，或者更确切地说是那里发生的一些其他令人讨厌的事情，我猜。
Any advise?
有什么建议吗？
采纳答案by Artless
My personal preference is to have "spacer classes", so to speak. For example:
我个人的偏好是有“间隔类”，可以这么说。例如：
.default-row-spacer{
margin-bottom:10px;
}
.default-spacer{
margin-right:10px;
}
.large-row-spacer{
margin-bottom:20px;
}
Then I use them like this:
然后我像这样使用它们：
<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>
This allows me to later change allof the site's margins later on, maintaining the same look and feel throughout my website.
这允许我稍后更改网站的所有边距，在整个网站上保持相同的外观和感觉。
回答by john Smith
it depends very much on your problems,
这在很大程度上取决于你的问题，
when you have to do this very very often and the values are not too different or you can closure this to "top 10 margin′s" , it may be usefull to make extra-classes like
当您必须非常频繁地执行此操作并且值没有太大差异时，或者您可以将其关闭为“前 10 个边距”时，制作像这样的额外类可能会很有用
.tTwenty { margin-top:20px;}
.bTwenty {margin-bottom:20px;}
and add them like
并添加它们
<div class="myClass tTwenty">
<div class="myClass">
<div class="myClass bTwenty">
but all your solutions will work, it′s just a difference of taking care of it but you should not start using inline-styles because you get laid with them and you start to fix every little stuff with inline-css, and then it gets hairy because when you look at this in a year you have to mix up the extern css and your inlines to understand the styling, and you need to touch every single document with the inline-style instead of fixing everything in your css-files
但是你所有的解决方案都会起作用，这只是照顾它的不同，但是你不应该开始使用内联样式，因为你已经习惯了它们并且你开始用内联css修复每一个小东西，然后它就会得到毛茸茸的，因为当你在一年内看到这个时，你必须混合 extern css 和你的内联来理解样式，并且你需要用内联样式接触每个文档，而不是修复你的 css 文件中的所有内容
回答by Raphael Rafatpanah
This is a problem I have encountered myself developing an eCommerce site where almost all content was being generated dynamically. Since most content blocks were repeated more than once, I couldn't style them equally since I wanted to style different blocks in different ways - similar to what you are noticing.
这是我在开发电子商务网站时遇到的一个问题，其中几乎所有内容都是动态生成的。由于大多数内容块被重复多次，我无法对它们进行相同的样式设置，因为我想以不同的方式对不同的块进行样式设置 - 类似于您所注意到的。
What I ended up doing was using Chrome's Inspect Element to find out exactly the hierarchy of div's and classes and ended up doing something like this:
我最终做的是使用 Chrome 的 Inspect Element 来准确找出 div 和类的层次结构，并最终做这样的事情：
Option 4:
选项 4：
.myClass { ...; }
.thumbnail .myClass { margin-top: 20px; }
div.leftCol .myClass { margin: 10px 0px; }
footer .myClass { margin-bottom: 20px; }
The benefit of this option, in my view, is to not only be able to have all the benefits of your option 1, but you don't have to add new classesand your CSS remains very structured and readable.
在我看来，这个选项的好处是不仅能够拥有选项 1 的所有好处，而且您不必添加新类并且您的CSS 仍然非常结构化和可读。
回答by SoWhat
The rule of thumb is: if it needs to be done repititively...like a list of something say comments. And each one has body that appears, 40px under the title, use css classes. If its a one time thing. just one object, say...use inline
经验法则是：如果它需要重复地完成......就像一个清单说评论。每一个都有正文出现，标题下40px，使用css类。如果它是一次性的。只有一个对象，比如说……使用内联
