Geek Answers Handbook

Apply padding to display: table-cell element

I am trying to apply a padding to the left side of an element with display: table-cell. I am using a Webkit browser and this will only work in a Webkit browser (yay!).

It appears in the correct layout, but as if there were no indentation at all.

Any pointers? I'm a little newbie when it comes todisplay:table

Here is my HTML (I embedded css inline to make it easier to read):

<div class="setting-group" style="display:table">
   <div class="title">Title</div>
   <div class="field" style="display:table-row">
      <span class="label" style="display:table-cell">Label</span>
      <select class="value" style="display:table-cell; padding-left: 20px" id="id">
         <option value="Opt 1">Option 1</option>
         ...
      </select>
    </div>
</div>
+5
source share
3 answers

Wrap your choice in the range of:

<span class="select" style="display:table-cell; padding-left:20px"><select class="value"  id="id"></span>
+2
source

You can also use the property ...

border-spacing:10px;
+1
source

Old school style maybe?

    .setting-group {
        padding-left:50px;
    }

    .setting-group .field .label {
        padding-right:20px;
    }
0
source

More articles:


All Articles