Html 最小化显式填充样式属性的使用

我发现我写了很多类似这样的代码：

           <div id="leftCol">

                <div style="padding-top:10px">
                    <asp:Image ID="imgRazor1" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX" runat="server" />
                </div>

                   <div style="padding-top:10px">
                    <asp:Image ID="imgRazor2" ImageUrl="http://www.example.com/dynimg.aspx?imageKey=XXX_CART" runat="server" />
                </div>

                <div style="padding-top:20px; padding-bottom:15px">
                    <asp:Image ID="Image3" ImageUrl="~/images/announcements/announcement1.jpg" runat="server" />
                    <div style="font-size:x-small">(from example.com)</div>
                </div>
            </div>

当我像这样编码实际内容而不是更一般的总体布局时，我倾向于发现特定的填充大小更合适。我会发现自己从8px变为11px，然后又回到9px。这一定是我身上的设计师，但我真的不喜欢我正在形成的习惯

我不认为自己能够重新审视一条全球规则，即“中等填充”是9px，将其改为11px，并期望得到令人满意的结果。它可能会使一些页面看起来更漂亮，也会毁掉其他页面

---

其他人如何解决这个问题？我想要css的好处，但我需要精细的控制。

您可以有一个通用规则，并在特定情况下使用id规则覆盖它（如果需要）：

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

---

如果需要，您可以使用常规规则，并在特定情况下使用id规则覆盖它：

#leftCol > div { /* general rule */ }
#img1 { /* custom override 1 */ }
#img2 { /* custom override 2 */ }

---

您的代码遭受严重的div感染。首先，我要为标题、段落等使用适当的标记。一旦有了正确标记的文档，就可以为公共元素添加类，然后根据需要设置这些类的样式。您会发现某些类型的元素无论在何处都共享一种样式，因此可以将内联样式的数量降至最低

您的类应该反映元素的属性，例如标题。一般来说，类不应该引用特定的设计实现。HTML是“what”，CSS是“how”。当您使用表示设计细节的CSS类时，您将如何注入HTML中

---

是的，有时这些规则需要打破。但这些都是例外。

您的代码遭受严重的div感染。首先，我要为标题、段落等使用适当的标记。一旦有了正确标记的文档，就可以为公共元素添加类，然后根据需要设置这些类的样式。您会发现某些类型的元素无论在何处都共享一种样式，因此可以将内联样式的数量降至最低

您的类应该反映元素的属性，例如标题。一般来说，类不应该引用特定的设计实现。HTML是“what”，CSS是“how”。当您使用表示设计细节的CSS类时，您将如何注入HTML中

---

是的，有时这些规则需要打破。但这些都是例外。

通常容器中的第一个和最后一个元素需要特殊处理。在您的示例中，似乎就是这种情况

---

第一个子和最后一个子选择器在浏览器中不是很可靠，主要是因为IE6，所以您可以手动为第一个和最后一个元素添加类，或者使用一点javascript来帮助您—这很好。

通常容器中的第一个和最后一个元素需要特殊处理。在您的示例中，似乎就是这种情况

---

第一个子和最后一个子选择器在浏览器中不是很可靠，这主要是因为IE6，所以您可以手动为第一个和最后一个元素添加类，或者使用一点javascript来帮助您—这很好。

每个div都有其用途。这是他们被区别对待的原因。找到它并给那些div一个反映内容的名称

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

---

然后你应该在样式表中添加填充。如果您要恢复设计元素的内联样式，那么您没有正确地考虑语义。一旦你有了自己的类，你就可以使用WebDeveloper等工具快速、轻松地编辑样式表。

这些div中的每一个都有自己的用途。这是他们被区别对待的原因。找到它并给那些div一个反映内容的名称

<div id="leftCol">
  <div class="navigation"></div>
  <div class="calendar"></div>
</div>

---

然后你应该在样式表中添加填充。如果您要恢复设计元素的内联样式，那么您没有正确地考虑语义。一旦你有了自己的类，你就可以使用Web Developer等快速、轻松地编辑样式表。

总之，我认为你需要重新思考如何使用标记，这样你就会发现自己拥有更好、更容易接受的CSS。另外，请阅读Zeldman的《使用Web标准设计》。标准并不是一切，但关心标准的人通常更关心好的、干净的代码，而这正是你所追求的。@John-yup这就是我想要做的。问题是，我不仅仅是在创建一个问题和答案列表，或者博客帖子，或者电子邮件标题。大部分内容基于一种似乎只需要显式填充的设计。总而言之，我认为你需要重新思考如何使用标记，这样你会发现自己拥有更好、更容易接受的CSS。另外，请阅读Zeldman的《使用Web标准设计》。标准不是一切，但是关心标准的人通常更关心好的、干净的代码，这是什么

---

“你看起来不是在找我吗？”约翰：是的，这就是我想做的。问题是，我不仅仅是在创建一个问题和答案列表，或者博客帖子，或者电子邮件标题。大部分内容基于一种似乎只需要显式填充的设计。我不知道如何避免所有这些