Tilan Lisääminen Marginaaleilla ja Täytteillä
margin-, padding- ja border-ominaisuuksilla lisätään tilaa elementteihin, mikä parantaa verkkosivun ulkoasua, luettavuutta ja käytettävyyttä. Tarkastellaan kutakin ominaisuutta tarkemmin.
margin- ja padding-ominaisuudet
padding
padding tarkoittaa tilaa elementin sisällön ja sen reunan välillä.
padding: top right bottom left
Meillä on useita tapoja määrittää padding-arvo.
Lyhytmuoto
/* 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;
Jokainen täyte erikseen
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin tarkoittaa tilaa elementin ja viereisten elementtien välillä. Se on alue elementin reunan ulkopuolella.
margin: top right bottom left
Voimme määrittää margin-arvon usealla tavalla.
Lyhytmuoto
/* 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;
Jokainen marginaali erikseen
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-ominaisuus
border viittaa viivaan, joka ympäröi elementin täytteen (padding) ja sisällön. Se on alue, joka erottaa elementin sisällön sen reunuksesta (margin).
border: width style color;
Lyhytmuoto
border: 4px solid brown;
Tämä tarkoittaa, että kaikkien sivujen reunus näyttää samalta. Niiden width on 4px, style on solid ja color on brown.
Tarkastellaan seuraavaa esimerkkiä ja selvitetään mahdolliset reunustyylit:
index.html
styles.css
Tuloste
Jokainen reuna erikseen
/* 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. Mikä on ero CSS:n margin- ja padding-ominaisuuksien välillä?
2. Mikä on border-ominaisuuden tarkoitus?
3. Kuinka voimme asettaa eri margin-arvot elementin eri puolille?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.56Tilan Lisääminen Marginaaleilla ja Täytteillä
Pyyhkäise näyttääksesi valikon
margin-, padding- ja border-ominaisuuksilla lisätään tilaa elementteihin, mikä parantaa verkkosivun ulkoasua, luettavuutta ja käytettävyyttä. Tarkastellaan kutakin ominaisuutta tarkemmin.
margin- ja padding-ominaisuudet
padding
padding tarkoittaa tilaa elementin sisällön ja sen reunan välillä.
padding: top right bottom left
Meillä on useita tapoja määrittää padding-arvo.
Lyhytmuoto
/* 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;
Jokainen täyte erikseen
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin tarkoittaa tilaa elementin ja viereisten elementtien välillä. Se on alue elementin reunan ulkopuolella.
margin: top right bottom left
Voimme määrittää margin-arvon usealla tavalla.
Lyhytmuoto
/* 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;
Jokainen marginaali erikseen
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-ominaisuus
border viittaa viivaan, joka ympäröi elementin täytteen (padding) ja sisällön. Se on alue, joka erottaa elementin sisällön sen reunuksesta (margin).
border: width style color;
Lyhytmuoto
border: 4px solid brown;
Tämä tarkoittaa, että kaikkien sivujen reunus näyttää samalta. Niiden width on 4px, style on solid ja color on brown.
Tarkastellaan seuraavaa esimerkkiä ja selvitetään mahdolliset reunustyylit:
index.html
styles.css
Tuloste
Jokainen reuna erikseen
/* 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. Mikä on ero CSS:n margin- ja padding-ominaisuuksien välillä?
2. Mikä on border-ominaisuuden tarkoitus?
3. Kuinka voimme asettaa eri margin-arvot elementin eri puolille?
Kiitos palautteestasi!
