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. Dette er området utenfor elementets kantlinje.
margin: top right bottom left
Vi kan angi margin på et par forskjellige 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 og innhold. Det er området som skiller elementets innhold fra dets marg.
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.
Vurder følgende eksempel og finn ut mulige kantstiler:
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 ulike 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 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.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. Dette er området utenfor elementets kantlinje.
margin: top right bottom left
Vi kan angi margin på et par forskjellige 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 og innhold. Det er området som skiller elementets innhold fra dets marg.
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.
Vurder følgende eksempel og finn ut mulige kantstiler:
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 ulike margin-verdier på ulike sider av et element?
Takk for tilbakemeldingene dine!
