Inner padding for column layout?

Question

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

If I understand you right you want to set the padding of every element inside your columns class, something like this should work `.columns > * { padding: 5px}` — Shriike, Oct 13 '14 at 19:17
Hi Shriike, yes that's right, but I am unfamiliar with that styling syntax, could you please write out a full example of it? — user3203425, Oct 13 '14 at 19:20

score 0 · Accepted Answer · answered Oct 13 '14 at 19:23

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.

Syed Muhammad Zeeshan · Answer 2 · 2014-10-13T19:50:59.323

-1

try this in css:

.columnsParagraph{
    padding:5px;
}

edited Oct 13 '14 at 19:50

answered Oct 13 '14 at 19:21

Syed Muhammad Zeeshan

1,027
7
16

1

The OP was trying to set padding for element underneath the columns class, not set padding for columns itself. – Shriike Oct 13 '14 at 19:24

Inner padding for column layout?

2 Answers2

Linked