Adding padding to display:table-cell

Question

I'm trying to horizontally align <li> elements while having them vertically aligned within a 100px by 100px box. But I'd also like a bit of padding between each element.

Here is the Fiddle

.toolbar ul { display: table-row; } .toolbar ul li { display: table-cell; height: 100px; list-style-type: none; vertical-align: middle; text-align: center; border: 1px solid black; background-color: red; margin: auto; } .toolbar ul li a { display: table-cell; vertical-align: middle; height: 100px; }

<div class="toolbar"> <ul> <li><a href="#">Kids<br /> Grades 0-6 </a> </li> <li><a href="#">Teens<br />Grades 7-12</a> </li> </ul> </div>

Basically, I'm looking for the same thing but with some padding between each element.

If you want to add padding left or right .toolbar ul li a {padding:0 5px;} — Head In Cloud
– Head In Cloud, Commented Aug 24, 2016 at 14:38
I do so, but it doesn't actually create padding between the elements, just adds to the width: jsfiddle.net/as3js51m/1 — T.J.
– T.J., Commented Aug 24, 2016 at 14:39

dippas · Accepted Answer · 2016-08-24 14:46:03Z

I'm not sure if I'm being clear. I'm looking to turn them into two distinct blocks

so you can use border-spacing, because margin won't work in table-cell

.toolbar ul { display: table; border-spacing: 5px; border: black 1px solid; padding:0 } .toolbar ul li { display: table-cell; height: 100px; list-style-type: none; vertical-align: middle; text-align: center; border: 1px solid black; } .toolbar ul li a { display: table-cell; vertical-align: middle; height: 100px; }

<div class="toolbar"> <ul> <li> <a href="#">Kids<br /> Grades 0-6 </a> </li> <li> <a href="#">Teens<br />Grades 7-12</a> </li> </ul> </div>

I do, but it doesn't add padding between elements, just increases box height/width: jsfiddle.net/as3js51m/1
did you run my snippet at least?, in this fiddle you don't have any padding at all
I did, but there is no padding between the elements. I'm not sure if I'm being clear. I'm looking to turn them into two distinct blocks.
Sorry. I'm a bit slow this morning. Yes. But whatever margins I'm adding aren't showing either (I've been trying both).

Fiido93 · Accepted Answer · 2016-08-24 14:51:08Z

1

add padding into your css

.toolbar ul li { display: table-cell; height: 100px; list-style-type: none; vertical-align: middle; text-align: center; border: 1px solid black; margin: auto 10px; padding: 20px; }

DEMO

answered Aug 24, 2016 at 14:51

Fiido93

1,9671 gold badge17 silver badges25 bronze badges

2 Comments

dippas Over a year ago

did you read OP comment at least? I'm looking to turn them into two distinct blocks

T.J. Over a year ago

Yeah, I had a sever case of the dumbs this morning. Thank you all for giving me a hand.

Collectives™ on Stack Overflow

Adding padding to display:table-cell

2 Answers 2

6 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Related