Aggiunta di Spazio con Margini e Padding
Le proprietà margin, padding e border ci aiutano ad aggiungere più spazio agli elementi, migliorando l'aspetto, la leggibilità e l'usabilità della risorsa web. Esaminiamole più da vicino.
Proprietà margin e padding
padding
padding indica lo spazio tra il contenuto di un elemento e il suo bordo.
padding: top right bottom left
Abbiamo diversi modi per assegnare un valore al padding.
Notazione abbreviata
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Ogni padding separatamente
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin si riferisce allo spazio tra un elemento e gli elementi adiacenti. È l'area esterna al bordo dell'elemento.
margin: top right bottom left
Possiamo assegnare il margin in diversi modi.
Notazione abbreviata
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Ogni margine separatamente
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Proprietà border
border si riferisce alla linea che circonda il padding e il contenuto di un elemento. È l'area che separa il contenuto dell'elemento dal suo margine.
border: width style color;
Shorthand
border: 4px solid brown;
Significa che il bordo di tutti i lati avrà lo stesso aspetto. La loro width è 4px, lo style è solid e il color è brown.
Consideriamo il seguente esempio e analizziamo i possibili stili di bordo:
index.html
styles.css
Output
Ogni bordo separatamente
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Qual è la differenza tra margin e padding in CSS?
2. Qual è lo scopo della proprietà border?
3. Come possiamo applicare valori di margin diversi ai vari lati di un elemento?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between margin and padding with examples?
What are the possible values for the border-style property?
How do I use shorthand for margin, padding, and border in CSS?
Awesome!
Completion rate improved to 2.56Aggiunta di Spazio con Margini e Padding
Scorri per mostrare il menu
Le proprietà margin, padding e border ci aiutano ad aggiungere più spazio agli elementi, migliorando l'aspetto, la leggibilità e l'usabilità della risorsa web. Esaminiamole più da vicino.
Proprietà margin e padding
padding
padding indica lo spazio tra il contenuto di un elemento e il suo bordo.
padding: top right bottom left
Abbiamo diversi modi per assegnare un valore al padding.
Notazione abbreviata
/* Same padding of 20px applied to all four sides: */
padding: 20px;
/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;
/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;
/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;
Ogni padding separatamente
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin si riferisce allo spazio tra un elemento e gli elementi adiacenti. È l'area esterna al bordo dell'elemento.
margin: top right bottom left
Possiamo assegnare il margin in diversi modi.
Notazione abbreviata
/* Same margin of 20px applied to all four sides: */
margin: 20px;
/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;
/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;
/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;
Ogni margine separatamente
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
Proprietà border
border si riferisce alla linea che circonda il padding e il contenuto di un elemento. È l'area che separa il contenuto dell'elemento dal suo margine.
border: width style color;
Shorthand
border: 4px solid brown;
Significa che il bordo di tutti i lati avrà lo stesso aspetto. La loro width è 4px, lo style è solid e il color è brown.
Consideriamo il seguente esempio e analizziamo i possibili stili di bordo:
index.html
styles.css
Output
Ogni bordo separatamente
/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;
1. Qual è la differenza tra margin e padding in CSS?
2. Qual è lo scopo della proprietà border?
3. Come possiamo applicare valori di margin diversi ai vari lati di un elemento?
Grazie per i tuoi commenti!
