CSS - Imbottiture
La proprietà padding ti consente di specificare quanto spazio deve apparire tra il contenuto di un elemento e il suo bordo -
Il valore di questo attributo dovrebbe essere una lunghezza, una percentuale o la parola inherit . Se il valore è ereditato , avrà lo stesso riempimento del suo elemento genitore. Se viene utilizzata una percentuale, la percentuale è della casella contenitore.
Le seguenti proprietà CSS possono essere utilizzate per controllare gli elenchi. Puoi anche impostare valori diversi per il riempimento su ciascun lato della scatola utilizzando le seguenti proprietà:
Il padding-bottom specifica il riempimento inferiore di un elemento.
Il padding-top specifica il riempimento superiore di un elemento.
Il padding-left specifica il riempimento sinistro di un elemento.
Il padding-right specifica la giusta imbottitura di un elemento.
Il padding serve come scorciatoia per le proprietà precedenti.
Vedremo ora come utilizzare queste proprietà con esempi.
La proprietà imbottitura inferiore
La proprietà padding-bottom imposta il padding inferiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-top
La proprietà padding-top imposta il padding superiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-left
La proprietà padding-left imposta il padding sinistro (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà padding-right
La proprietà padding-right imposta il padding destro (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Produrrà il seguente risultato:
La proprietà Padding
La proprietà padding imposta il padding sinistro, destro, superiore e inferiore (spazio) di un elemento. Questo può assumere un valore in termini di lunghezza di%.
Ecco un esempio:
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Produrrà il seguente risultato: