Legge til Plass med Marger og Polstring
Egenskapene margin, padding og border hjelper oss med å legge til mer plass rundt elementer, noe som forbedrer utseendet, lesbarheten og brukervennligheten til nettressursen. La oss se nærmere på hver av dem.
margin- og padding-egenskaper
padding
padding refererer til avstanden mellom innholdet i et element og dets kantlinje.
padding: top right bottom left
Vi har flere måter å angi en verdi for padding på.
Kortform
/* 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;
Hver padding separat
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin refererer til avstanden mellom et element og tilstøtende elementer. Det er området utenfor elementets kantlinje.
margin: top right bottom left
Vi kan angi margin på flere måter.
Kortform
/* 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;
Hver margin separat
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-egenskap
border refererer til linjen som omgir et elements polstring (padding) og innhold. Det er området som skiller elementets innhold fra dets margin.
border: width style color;
Forkortelse
border: 4px solid brown;
Dette betyr at kanten på alle sider vil se lik ut. Deres width er 4px, style er solid, og color er brown.
La oss se på følgende eksempel og finne ut hvilke mulige kantstiler som finnes:
index.html
styles.css
Utdata
Hver kant separat
/* 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. Hva er forskjellen mellom margin og padding i CSS?
2. Hva er formålet med border-egenskapen?
3. Hvordan kan vi bruke forskjellige margin-verdier på ulike sider av et element?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain the difference between margin and padding?
How do I choose which border style to use?
Can I use different values for each side of margin, padding, or border?
Awesome!
Completion rate improved to 2.56Legge til Plass med Marger og Polstring
Sveip for å vise menyen
Egenskapene margin, padding og border hjelper oss med å legge til mer plass rundt elementer, noe som forbedrer utseendet, lesbarheten og brukervennligheten til nettressursen. La oss se nærmere på hver av dem.
margin- og padding-egenskaper
padding
padding refererer til avstanden mellom innholdet i et element og dets kantlinje.
padding: top right bottom left
Vi har flere måter å angi en verdi for padding på.
Kortform
/* 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;
Hver padding separat
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin refererer til avstanden mellom et element og tilstøtende elementer. Det er området utenfor elementets kantlinje.
margin: top right bottom left
Vi kan angi margin på flere måter.
Kortform
/* 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;
Hver margin separat
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-egenskap
border refererer til linjen som omgir et elements polstring (padding) og innhold. Det er området som skiller elementets innhold fra dets margin.
border: width style color;
Forkortelse
border: 4px solid brown;
Dette betyr at kanten på alle sider vil se lik ut. Deres width er 4px, style er solid, og color er brown.
La oss se på følgende eksempel og finne ut hvilke mulige kantstiler som finnes:
index.html
styles.css
Utdata
Hver kant separat
/* 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. Hva er forskjellen mellom margin og padding i CSS?
2. Hva er formålet med border-egenskapen?
3. Hvordan kan vi bruke forskjellige margin-verdier på ulike sider av et element?
Takk for tilbakemeldingene dine!
