Ciao a tutti,
non mi è chiara una cosa. Dato il seguente codice html e css:

codice:
<div id="barraSx" class="barra">
	<ul id="menu">
		<li class="elementoMenu">
			Home
		
		<li class="elementoMenu">
			About
		
	[/list]
</div>
codice:
#barraSx {
	width: 200px;
	float: left;
}

ul#menu {
	padding: 20px 20px 0px 20px;
}

li.elementoMenu {
	list-style: none;
	margin-bottom:20px;
	padding: 3px 0px 3px 10px;
	background: #999;
}

.elementoMenu a{
	color: white;
	text-decoration: none;
	font-size: 20px;
}
Ottengo un padding come desiderato, cioè 20px per lato. Se invece modifico come segue:

codice:
#barraSx {
	width: 160px;
	float: left;
padding: 20px 20px 0px 20px;
}

ul#menu {
	
}
Ottengo un padding sulla sinistra di ogni "li" di 40px, come mai? Non riesco a capirne il motivo...