Alcuni dubbi sul padding

[nicolo_conte]

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

<div id="barraSx" class="barra">
	<ul id="menu">
		<li class="elementoMenu">
			Home
		
		<li class="elementoMenu">
			About
		
	[/list]
</div>

#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:

#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...

[kontrasto]

Ciao,

probabilmente è dovuto al fatto che alcuni elementi HTML hanno margin e padding di default. E' così per tutti i titoli (h1, h2, ecc.), i paragrafi (p) e anche le liste (ul).

Perciò nel secondo esempio che hai postato, invece di lasciare l'ul vuoto, scrivi:

ul { margin:0; padding:0; }

Dovrebbe funzionare

[nicolo_conte]

Originariamente inviato da kontrasto
Ciao,

probabilmente è dovuto al fatto che alcuni elementi HTML hanno margin e padding di default. E' così per tutti i titoli (h1, h2, ecc.), i paragrafi (p) e anche le liste (ul).

Perciò nel secondo esempio che hai postato, invece di lasciare l'ul vuoto, scrivi:



Dovrebbe funzionare

Perfetto, funziona alla grande. Grazie mille per l'aiuto!

[LùcazStrict]

se non erro tra l'altro il render del padding cambia radicalmente se la pagina è in strict o in transitional

[fcaldera]

Originariamente inviato da LùcazStrict
se non erro tra l'altro il render del padding cambia radicalmente se la pagina è in strict o in transitional

della larghezza (width), ma solo per alcuni browser