possibile che non riesco a capire le differenze? ho letto vari articoli e illustazioni ma non riesco a capirlo cmq.. qualcuno potrebbe spiegarmelo x favore?gli sarei molto grato
il margin è: lo spazio dal margine della pagina (indipendentemente se è top, buttom, left and right)???
il padding??
il border sarebbe??
grazie mille..
Il margin è la distanza che intercorre tra il bordo dell'elemento e gli oggetti esterni. Se tu, ad esempio, assegni ad nu paragrafo un margine superiore di 10px, con "margin-top: 10px;" qualunque oggetto posizionato sopra il paragrafo non si potrà avvicinare oltre quei dieci pixel: è come se creassi uno spazio vuoto di un certo numero di pixel, tutto qui.
Il padding è invece uno spazio che crei all'interno di un contenitore: tra i bordo e il contenuto, sarà lasciato uno spazio vuoto grazie a padding.
Il bordo può essere visualizzato come una cornicettam, grazie alla proprietà border..
leggi nella guida css quando parla di box model, ti creerà anche in futuro ulteriori grattacapi..
Vediamo se riesco a spiegarmi con questo esempio
Ecco un codice html con relativo css
Che produce l'immagine allegataCodice PHP:<head>
<style>
#esterno
{
float: left;
margin: 0px;
padding: 0px;
border: 1px solid black;
width: 400px;
background-color: yellow;
}
#interno
{
float: left;
margin: 10px;
padding: 20px;
border: 1px solid red;
}
#interno-interno
{
background-color: #ccf;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="esterno">
<div id="interno">
<div id="interno-interno">
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
klajsfdò kafm kj asdò fòak afj òakfdmò akdfj saòfkj maòfjòas
asf safjda -klfja -klfja afjka òafjklòq jsòadsfkl asò ask
la dò àJDSòA FDòA FAòFAFJDDòA FJA sòdfsfdkjs òfkdgjsgfjk sd
</div>
</Div>
</div>
</body>
Il div che ci interessa è il div con id="interno" poichè è l'unico con margin e padding. I div "esterno" e "interno-interno" hanno i colori solo per permetterci di distinguere le cose che ci interessano
Il "border" come puoi vedere dalla figura è la cornice rossa e viene definita da "border: 1px solid red";
Il "margin" è la distanza tra il bordo di un oggetto e il bordo di qualsiasi cosa gli stia vicino o anche intorno... infatti come vedi in figura è la distanza tra la cornice rossa (il bordo) e la cornice nera (il bord del div ESTERNO)
Il padding invece è la distanza tra il bordo di un elemento e il suo contenuto. Nel nostro caso la distanza tra la cornice rossa e la parte azzurrina
grazie mille ragazzi.. ora con questi disegni faccio delle prove. si cmq ho visto il box model..
capito tutto.
Esatto.
Se vuoi si puo` completare:
Il margin ha lo sfondo del blocco contenitore (il body o il box che contiene quello che stiamo sistemando)
Il border ha un suo colore proprio
Il padding ha lo sfondo del blcco che stiamo sistemando
Altro punto da considerare
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
perfetto..x ultima cosa le differenze tra float e clear..perchè non riesco in una certa cosa. mi sono creato uno scheda di questo tipo:
header
main con all'interno: menu e contenuto
footer
quando con il mouse e tastiera voglio ingradire le dimensioni del carattere in explorer, succede questo: il testo che è nel div "contenuto" si allarga fino al div del "menu" e i link vanno in fondo alla pagina. come faccio ad allargare il testo solo nel div "contenuto"??
Non devi allargare il testo solo di uno o dell'altro, il problema deve essere da un'altra parte
come hai realizzato il tuo layout?
Float:
Prende l'oggetto e lo sposta a destra o sinistra. Gli elementi successivi che hanno abbastanza spazio per farlo si posizionerannoa fianco del floattato
Per questo motivo (per la parte in neretto) gli elementi floattati DEVONO avere un width VALORIZZATO e gli elementi che vogliamo AL FIANCO dovrebbero anche loro assicurasi di entranre
ad esempio
Clear:Codice PHP:<div style="float: left; width: 25%">Sinistra</div>
<div style="width: 74%">Destra</div>
"Interrompe" il float. In pratica, mettendo un "clear: left/right/both" su un elemento, impedisce a questo di mettersi "di fianco" ad altri elementi che hanno float:left/right/entrambi
Se nell'esempio precedente mettessimo "clear:left" oppure "clear:both" al secondo div, questo non apparirebbe "di fianco" ma SOTTO il div precedente
ecco il codice css nel foglio esterno:
body{font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
background: #FFFFCC;}
h1{margin: 0;padding: 5px;font-size: 600%;color: #FF744C}
h2,h3,h4{margin:0;padding-left: 5px;line-height: 30px;color: #333; text-align: ;}
h2{font-size: 160%}
h3{font-size:130%}
h4{font-size:120%}
p{margin: 5px;}
div#container{width:760px; background: url(3col3.jpg) repeat-y;text-align:left}
div#header{width:760px%; height:0px%; background: url(banner.png)}
div#barrabianca2{clear:both;padding-top:7px;background: #ffffff;}
div#main{width:760px}
div#content{float:right; width:560px;padding-left:0%;}
div#nav{float:left;width:200px;}
div#footer{clear:both;width:100%;padding-top:5px;background: #D0B4F8; text-align: center;}
div#barra{clear:both;width:3px%;padding-top:7px;background: #ffffff;}
A:LINK{ color:#ff0000;
text-decoration: none;
font-family: Tahoma,Times New Roman, Verdana;
font-size:13px;
font-weight: bold;
}
A:VISITED{ color: #ff0000;
text-decoration: none;
font-family: Tahoma,Times New Roman, Verdana;
font-size:13px;
font-weight: bold;
}
A:HOVER{ color: #000000;
text-decoration: none;
font-family: Tahoma,Times New Roman, Verdana;
font-size:13px;
font-weight: bold;
}
Ci sono degli errori e un po' di confusione
Alcune cose sono definite con px e percentuale contemporaneamente
Inoltre solitamente una pagina si costruisce con un solo stile di larghezze.Codice PHP:div#header{width:760px[b]%[/b]; height:0px[b]%[/b]; background: url(banner.png)}
O tutte in percentuale, o tutte in pixel... tranne forse i "contenitori esterni" che possiamo definire in pixel (o in em) la dimensione, per poi lasciare che tutti gli elementi interni abbiano delle percentuali, che faranno capo a questa definizione "generale"
Ti convine quindi correggere e omogeneizzare il tuo css prima di procedere ad un individuazione del problema
Permessi di invio
Rispondi quotando