html - CSS 填充方案

Question

我正在考虑为填充和边距创建一些 CSS 样式，它们可以像这样工作......

如果你想在所有四个边上添加填充......

<div class="Pad4">

如果你想在顶部和底部添加填充......

<div class="PadV">

如果要在左右两边添加padding...

<div class="PadH">

类似的样式会为顶部 (PadT)、底部 (PadB)、左侧 (PadL) 或右侧 (PadR) 边。

第二类样式将指定填充或边距的数量。例如，10 = 10 像素，25 = 25 像素。

然后你会把它放在一起，像这样:

<div class="PadV 10 PadH 25">

这个特定的 div 将在左侧和右侧有 10 个像素的填充，在顶部和底部有 25 个像素。

当然，由于一些问题，这不会完全像我描述的那样工作。例如，想象一下这两个 div 的...

<div id="Uno" class="PadV 10 PadH 25">
<div id="Dos" class="PadV 25 PadH 10">

如果我有以下样式...

.PadV.10

我如何确保它只应用于 div#Uno，而不应用于 div#Dos？

也许还有一个更重要的问题 - 我的方案听起来是个好主意，还是太冗长、太业余或其他什么？

Answer 1

如果我要打字，对我来说似乎毫无意义

<div id="Uno" class="PadV 10 PadH 25">

我也可以只做内联样式

<div id="Uno" style="padding: 10px 25px">