Costruire un sito Web 6 – CSS – Parte 4

Costruire un sito Web 6 – CSS – Parte 4

Oggi parliamo di Margin, Padding e Border.

Margin

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.

margin-top:100px;
margin-left:50px;
margin-bottom:20px;
margin-right:40px;

In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.

Padding

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

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;

border-style:ridge solid dotted dashed; si da uno stile diverso per ogni bordo
border-color: green beige pink palegoldenrod; si da un colore diverso per ogni bordo
border-width: 10px 5px 2px 1px; si da una grandezza diversa per ogni bordo
border-radius:50%; per creare dei cerchi o se utilizzate px anche bordi arrotondati

Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.

Costruire un sito Web 6 – CSS – Parte 4