列布局的内部填充？答案

【问题标题】：Inner padding for column layout?列布局的内部填充？
【发布时间】：2014-10-14 03:50:59
【问题描述】：

我有一个简单的页面，可以将内容分成列。有没有办法为每列应用内部填充？我看到了 column-gap 属性，但我认为这不适用于第一列的左侧。另外我需要我的列正好是 300px 宽。这是我的设置：

<html>
 <head>
   <style>
    .columns {
      column-width: 300px;
    }
   </style>
 </head>
 <body>
   <div class="columns">  
      ...
   </div>
 </body>
</html>

理想情况下会有一些属性，例如：

column-inner-padding: ...;

我可以通过在列中的所有元素上显式设置填充来使其工作，但这不能很好地扩展：

.columnsParagraph {
   padding-left: 20px;
   padding-right: 20px;
}

...

<div class="columns">  
  <p class="columnsParagraph">...</p>
  <p class="columnsParagraph">...</p>
  <p class="columnsParagraph">...</p>
  ...
</div>

谢谢

【问题讨论】：

如果我理解你的话，你想在你的 columns 类中设置每个元素的填充，这样的东西应该可以工作.columns > * { padding: 5px}
嗨，Shriike，是的，没错，但我不熟悉那种样式语法，你能写一个完整的例子吗？

标签： html css

【解决方案1】：

您可以让一个类更改应用该类的元素下的元素样式。 Star Selector

这会将样式应用于具有列类的元素下游的每个元素。

.columns *

这会将样式应用于具有列类的元素的每个直接后代元素。

.columns > *

您也可以将 * 替换为任何其他选择器，例如 p 以应用于列下的所有 p 标签。

【讨论】：

【解决方案2】：

在 css 中试试这个：

.columnsParagraph{
    padding:5px;
}

【讨论】：

OP 试图为 columns 类下的元素设置填充，而不是为列本身设置填充。