问题
I have a simple page that flows the content into columns. Is there a way to apply an inner padding per column? I see the column-gap property, but that doesn't work for the left side of the first column I believe. Also I need my columns to be exactly 300px wide. This is my setup:
<html>
<head>
<style>
.columns {
column-width: 300px;
}
</style>
</head>
<body>
<div class="columns">
...
</div>
</body>
</html>
Ideally there would be some property like:
column-inner-padding: ...;
I can kind of get this to work by explicitly setting a padding on all elements within the columns, but that does not scale well:
.columnsParagraph {
padding-left: 20px;
padding-right: 20px;
}
...
<div class="columns">
<p class="columnsParagraph">...</p>
<p class="columnsParagraph">...</p>
<p class="columnsParagraph">...</p>
...
</div>
Thank you
回答1:
You can have a class change the styles of elements under that element the class is applied to. Star Selector
This would apply the style to every element anywhere downstream from an element with the columns class.
.columns *
This would apply the style to every direct descendant element from your element that has the columns class.
.columns > *
You could also replace * with any other selector, for example p to apply to all of your p tags underneath columns.
回答2:
try this in css:
.columnsParagraph{
padding:5px;
}
来源：https://stackoverflow.com/questions/26347271/inner-padding-for-column-layout