padding not getting applied to <a> link

Printable View

04-19-2015, 08:19 AM
vinpkl

padding not getting applied to <a> link

Hi

I want to apply padding to CATEGORY LINK which is inside <li>

Only left padding is getting applied

but Top and Bottom padding is not getting applied

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #leftnav li{list-style:none; background-color:#4b5913; padding:0px; color:#FFFFFF; margin-bottom:2px} #leftnav ul li{background-color:#FFFFFF; color:#333333; padding:7px; border-bottom:1px dashed #999999} #leftnav li a{padding:40em 0 40px 40px; text-decoration:none; color:#FFFFFF;} </style> </head> <body> <ul id="leftnav"> <li><a href="">CATEGORY</a> <ul> <li>sublink</li> <li>sublink</li> <li>sublink</li> </ul> </li> <li><a href="">CATEGORY</a></li> <li><a href="">CATEGORY</a></li> </ul> </body> </html>

thanks
vineet
04-19-2015, 08:37 AM
Beverleyh

<a> is an inline element so you need to change the display property to display:block;
04-19-2015, 08:56 AM
vinpkl

Quote:

Originally Posted by Beverleyh

<a> is an inline element so you need to change the display property to display:block;

Thanks Beverleyh
All working fine now

vineet
04-19-2015, 03:31 PM
styxlawyer

Did you really mean to do this:

#leftnav li{list-style:none; .....

The list-style property is intended to be applied to the parent list (<ul> or <ol>), not the list elements themselves. Click on this link for more information.
04-19-2015, 04:18 PM
Beverleyh

Quote:

Originally Posted by styxlawyer

Did you really mean to do this:

#leftnav li{list-style:none; .....

The list-style property is intended to be applied to the parent list (<ul> or <ol>), not the list elements themselves. Click on this link for more information.

I think it's important to clarify that while applying list-style to the parent ul/ol is preferred/recommended (due to more predictable inheritance) there is nothing wrong with applying it to li elements either. Both ways are perfectly valid. The specs only state that it should be applied to the li with care so that the choice of (child/descendant) selector does not produce undesirable results.