padding not getting applied to <a> link

**vinpkl** · 04-19-2015, 08:19 AM

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

**Beverleyh** · 04-19-2015, 08:37 AM

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

**vinpkl** · 04-19-2015, 08:56 AM

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

**styxlawyer** · 04-19-2015, 03:31 PM

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.

**Beverleyh** · 04-19-2015, 04:18 PM

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.

Thread: padding not getting applied to <a> link

Thread Tools

Search Thread

padding not getting applied to <a> link

Similar Threads

padding:initial vs. padding:0

Padding issue on link list.

Font styles not being applied when using PHP

iframes applied to my site...Plz help!

My table gets padding even when i use padding:0; in my css

Bookmarks

Bookmarks

Posting Permissions