Oggi parliamo di Margin, Padding e Border.
Margin serve per dare un margine tutto intorno a una fotografia piuttosto che a un paragrafo ect. Se noi scriviamo Margin:100px; vuol dire che metteremo 100px tutto intorno all’oggetto. Possiamo anche decidere di fare dei margini diversi. Se invece di un varolo ne mettiamo due Margin:100px 50px; metterono 100px sopra e sotto e 50px a destra e sinistra. Volendo possiamo anche cambiare il margine per ogni lato Margin:100px 50px 20px 40px; in questo caso avremo 100px sopra, 50px a destra, 20px sotto e 40px a sinistra del nostro oggetto. Esiste un’altro modo per dare margine.
In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.
Il Padding funzione allo stesso modo di margin. La differenza sostanziale è che mentre margine da del margine intorno all’oggetto, padding da margine all’interno dell’oggetto stesso.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.secondo {
color:pink;
background-color:#000080;
width:200px;
float:left;
text-align: justify;
position:relative;
padding:50px ;}
</style>
</head>
<body>
<p class=”secondo”>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero.</p>
</body>
</html>
Il risultato.
Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:
Border si utilizza per dare uno stile al bordo dell’oggetto. Es:
<html> <head> <title>Webpage With Style </title> <style type="text/css"> #quadrato-red { background-color:red; border: 10px yellow solid; } #quadrato-blue { background-color:blue; border-style: ridge solid dotted dashed; border-color: green beige pink palegoldenrod; border-width: 10px 5px 2px 1px; } #quadrato-green { background-color:green; border-radius:50%; } .quadrato{ width:400px; height:400px; margin:40px; float:left; } </style> </head> <body> <div id="quadrato-red" class="quadrato"> </div> <div id="quadrato-blue" class="quadrato"> </div> <div id="quadrato-green" class="quadrato"> </div> </body> </html>
Potete copiare il codice e vedere quello che fa. Col border bisogna specificare tre valore; la grandezza del bordo il colore e lo stile. border: 10px yellow solid;
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni
Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.
Info sull'autore