How to add padding & margin to LI elements with display:table-row?

HTML & CSS
1

I’ve got a series of li elements in which I’ve applied the display:table-row property to.

One I’ve done this, it appears that the elements no longer respond to padding or margin settings. How can this be done?

.someDiv li {display:table-row; margin-top:20px; padding-top:20px;}

Neither the padding or margin settings have any effect on the layout of the li elements.

2

Hm, you could do something like this to get the padding working, though margin still seems not to work:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
ul {display:table}
li {display: table-row;}
li div {display:table-cell; padding-top: 20px;}
</style>
	
</head>

<body>
<ul>
<li><div>text</div></li>
<li><div>text</div></li>
<li><div>text</div></li>
</ul>

</body>

</html>

Perhaps you could also use bottom margins on the divs to make up for the lack of top margins (and thereby get the same effect?)

3

@Ralph: thanks for the quick help.

If at all possible, I’d really like to find a solution that does not require me to add div wrappers inside my li elements.

Do you think this is the only way to achieve padding and margin on elements with display:table-row?

Also, why do you have to set the display:table on the parent element? Isn’t it implied if the child elements are table-row?

4

[QUOTE]Also, why do you have to set the display:table on the parent element? Isn’t it implied if the child elements are table-row?[QUOTE]
Some UA’s require this.

Note that when you set Display:table/display:table-row, etc you are actually causing the element to display as such. So, attributes that can not be applied to a table row… cant be applied to any element with display:table-row. In another words, since you cant adjust the margin for a <tr> you also cant do it for a <div style:“display:table-row”>

5

Onliy in gecko :slight_smile:


li:before{content:" ";display:block;height:20px}

Otherwise you will just have to make space on the inner elements instead which I assume you have already in place.

Also, why do you have to set the display:table on the parent element? Isn’t it implied if the child elements are table-row?

Older browsers used to have problems with that and needed the complete structure but I think modern browsers are mostly ok but it does no harm to add them where you already have an element available.

Older Gecko (ff3-) used to break when display:table code was used inline without the proper structure but was fine when used in an external stylesheet.