Tilføjelse af Plads med Margener og Polstring
Egenskaberne margin, padding og border hjælper os med at tilføje mere plads til elementer, hvilket forbedrer webressourcens udseende, læsbarhed og brugervenlighed. Lad os se nærmere på hver af dem.
margin- og padding-egenskaber
padding
padding refererer til pladsen mellem et elements indhold og dets kant.
padding: top right bottom left
Vi har flere måder at angive en værdi til padding på.
Forkortet notation
/* 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 afstanden mellem et element og de tilstødende elementer. Det er området uden for elementets kant.
margin: top right bottom left
Vi kan angive margin på flere måder.
Forkortet notation
/* 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-egenskab
border refererer til linjen, der omgiver et elements polstring og indhold. Det er området, der adskiller elementets indhold fra dets margin.
border: width style color;
Forkortelse
border: 4px solid brown;
Det betyder, at kanten på alle sider vil se ens ud. Deres width er 4px, style er solid, og color er brown.
Overvej følgende eksempel og undersøg de mulige kantstile:
index.html
styles.css
Output
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. Hvad er forskellen mellem margin og padding i CSS?
2. Hvad er formålet med border-egenskaben?
3. Hvordan kan vi anvende forskellige margin-værdier på forskellige sider af et element?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.56Tilføjelse af Plads med Margener og Polstring
Stryg for at vise menuen
Egenskaberne margin, padding og border hjælper os med at tilføje mere plads til elementer, hvilket forbedrer webressourcens udseende, læsbarhed og brugervenlighed. Lad os se nærmere på hver af dem.
margin- og padding-egenskaber
padding
padding refererer til pladsen mellem et elements indhold og dets kant.
padding: top right bottom left
Vi har flere måder at angive en værdi til padding på.
Forkortet notation
/* 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 afstanden mellem et element og de tilstødende elementer. Det er området uden for elementets kant.
margin: top right bottom left
Vi kan angive margin på flere måder.
Forkortet notation
/* 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-egenskab
border refererer til linjen, der omgiver et elements polstring og indhold. Det er området, der adskiller elementets indhold fra dets margin.
border: width style color;
Forkortelse
border: 4px solid brown;
Det betyder, at kanten på alle sider vil se ens ud. Deres width er 4px, style er solid, og color er brown.
Overvej følgende eksempel og undersøg de mulige kantstile:
index.html
styles.css
Output
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. Hvad er forskellen mellem margin og padding i CSS?
2. Hvad er formålet med border-egenskaben?
3. Hvordan kan vi anvende forskellige margin-værdier på forskellige sider af et element?
Tak for dine kommentarer!
