CODEWITHSUNDEEP
css
php_nub_qq
php_nub_qq

Reputation: 16015

Padding with and without child

I am styling a simple menu and I'm having an unbelievably hard time figuring out how to put padding in list items so that they look the same.

I have an unordered list, where list items may contain an anchor, if that is the case I want the whole body of the visible element to be clickable ( in other words the anchor should occupy 100% width and height of the list item ), however if there is no anchor the list item should still be the same height/width as the other list items.

HTML

<ul>

    <li>Index</li>
    <li><a href=''>Home</a></li>
    <li>FAQ</li>

</ul>

CSS

ul { padding:0; margin:0; width: 200px; background: lightgray; }

li { padding: 20px; border: solid black; }

li a { display: block; }

DEMO

If I put the padding on a then items without a child dont have padding, if I put it on both then items with a child become fatter, and in the case I show in the fiddle there is an area of the list item that is not clickable. How can I fix this?

Upvotes: 1

Views: 173

Answers (1)

C3roe
C3roe

Reputation: 96306

If I put the padding on a then items without a child dont have padding, if I put it on both then items with a child become fatter

Well, then send them on a diet – by reversing the “fattening” effect of the padding on the links by a negative margin of the same amount:

li a { display:block; margin:-20px; padding:20px; background:red; }

http://jsfiddle.net/rph4bg0j/11/

(Red background only added so the effect shows up directly.)

Upvotes: 2

Related Questions