Lägga till utrymme med marginaler och utfyllnad
Egenskaperna margin, padding och border hjälper oss att lägga till mer utrymme runt element, vilket förbättrar webbplatsens utseende, läsbarhet och användbarhet. Låt oss titta närmare på var och en av dem.
Egenskaperna margin och padding
padding
padding avser utrymmet mellan ett elements innehåll och dess kantlinje.
padding: top right bottom left
Vi har flera sätt att ange ett värde för padding.
Förenklad syntax
/* 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;
Varje padding separat
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin avser utrymmet mellan ett element och angränsande element. Det är området utanför elementets kantlinje.
margin: top right bottom left
Vi kan ange margin på ett par olika sätt.
Förkortad syntax
/* 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;
Varje marginal separat
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-egenskap
border avser linjen som omger ett elements padding och innehåll. Det är området som separerar elementets innehåll från dess marginal.
border: width style color;
Förkortning
border: 4px solid brown;
Det innebär att ramen på alla sidor ser likadan ut. Deras width är 4px, style är solid och color är brown.
Låt oss titta på följande exempel och undersöka möjliga ramstilar:
index.html
styles.css
Utdata
Varje 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. Vad är skillnaden mellan margin och padding i CSS?
2. Vad är syftet med egenskapen border?
3. Hur kan vi tillämpa olika margin-värden på olika sidor av ett element?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.56Lägga till utrymme med marginaler och utfyllnad
Svep för att visa menyn
Egenskaperna margin, padding och border hjälper oss att lägga till mer utrymme runt element, vilket förbättrar webbplatsens utseende, läsbarhet och användbarhet. Låt oss titta närmare på var och en av dem.
Egenskaperna margin och padding
padding
padding avser utrymmet mellan ett elements innehåll och dess kantlinje.
padding: top right bottom left
Vi har flera sätt att ange ett värde för padding.
Förenklad syntax
/* 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;
Varje padding separat
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
margin
margin avser utrymmet mellan ett element och angränsande element. Det är området utanför elementets kantlinje.
margin: top right bottom left
Vi kan ange margin på ett par olika sätt.
Förkortad syntax
/* 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;
Varje marginal separat
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
border-egenskap
border avser linjen som omger ett elements padding och innehåll. Det är området som separerar elementets innehåll från dess marginal.
border: width style color;
Förkortning
border: 4px solid brown;
Det innebär att ramen på alla sidor ser likadan ut. Deras width är 4px, style är solid och color är brown.
Låt oss titta på följande exempel och undersöka möjliga ramstilar:
index.html
styles.css
Utdata
Varje 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. Vad är skillnaden mellan margin och padding i CSS?
2. Vad är syftet med egenskapen border?
3. Hur kan vi tillämpa olika margin-värden på olika sidor av ett element?
Tack för dina kommentarer!
