如何对块中的每个元素应用填充

Question

我正在寻找一种将填充应用于块中每个元素的方法。

就像在这个示例块中一样，我希望每个元素都获得一个填充值。

#informations {
border: 1px solid red;
display: flex;
flex-direction: column;
width: 20%;
text-align: center;
}
#informations > * > * {
border: 1px solid black;
/* I want here a way to apply padding to every element in the big container */
}
#child_inf_2 {
display: flex;
flex-direction: row;
justify-content: center;
}

<div id="informations">
<div>
<a id="child_inf_1">This is hot</a>
<div id="child_inf_2">
<a>Tepid hot</a>
<a>This is tepid</a>
<a>Tepid cold</a>
</div>
<a id="child_inf_3">This is cold</a>
</div>
</div>

我可以在这里使用#selected_elt > * > * {padding}，但这是一个非常不稳定的解决方案，并且取决于每个容器的子级数量。

Answer 1

如果你想让所有东西都使用填充，你可以用规范化你的css

* {
padding: 5px;
}

像这样：

* {
padding: 5px;
} 
#informations {
border: 1px solid red;
display: flex;
flex-direction: column;
width: 20%;
text-align: center;
}
#informations > * > * {
border: 1px solid black;
/* I want here a way to apply padding to every element in the big container */
}
#child_inf_2 {
display: flex;
flex-direction: row;
justify-content: center;
}

<div id="informations">
<div>
<a id="child_inf_1">This is hot</a>
<div id="child_inf_2">
<a>Tepid hot</a>
<a>This is tepid</a>
<a>Tepid cold</a>
</div>
<a id="child_inf_3">This is cold</a>
</div>
</div>

另一个解决方案可以将样式应用于#informationsdiv中的所有(*(，如下所示：

#informations > * {
padding: 5px;
}

#informations > * {
padding: 5px;
}
#informations {
border: 1px solid red;
display: flex;
flex-direction: column;
width: 20%;
text-align: center;
}
#informations > * > * {
border: 1px solid black;
/* I want here a way to apply padding to every element in the big container */
}
#child_inf_2 {
display: flex;
flex-direction: row;
justify-content: center;
}

<div id="informations">
<div>
<a id="child_inf_1">This is hot</a>
<div id="child_inf_2">
<a>Tepid hot</a>
<a>This is tepid</a>
<a>Tepid cold</a>
</div>
<a id="child_inf_3">This is cold</a>
</div>
</div>

Answer 2

关闭！CCD_ 2将针对CCD_ 3的任何子元素。

点击此处阅读有关选择器的更多信息。

此外，正如其他人已经提到的，使用通用选择器是一种相当生硬的方法。请考虑将这些样式提取到一个类中，以便应用于#selected_elt的后代，以获得更可持续的替代方案

#informations {
border: 1px solid red;
display: flex;
flex-direction: column;
width: 20%;
text-align: center;
}
#informations * {
border: 1px solid black;
padding: 1em;
/* I want here a way to apply padding to every element in the big container */
}
#child_inf_2 {
display: flex;
flex-direction: row;
justify-content: center;
}

<div id="informations">
<div>
<a id="child_inf_1">This is hot</a>
<div id="child_inf_2">
<a>Tepid hot</a>
<a>This is tepid</a>
<a>Tepid cold</a>
</div>
<a id="child_inf_3">This is cold</a>
</div>
</div>https://stackoverflow.com/questions/67587939/how-to-apply-a-padding-to-every-element-in-a-block#