Lägga till utrymme med marginaler och utfyllnad
Egenskaperna margin, padding och border hjälper oss att lägga till mer utrymme kring element, vilket förbättrar webbplatsens utseende, läsbarhet och användbarhet. Låt oss titta närmare på var och en av dem.
margin- och padding-egenskaper
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 intilliggande 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örenklad 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 skiljer elementets innehåll från dess marginal.
border: width style color;
Förkortning
border: 4px solid brown;
Det betyder att ramen på alla sidor kommer att se 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?
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.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 kring element, vilket förbättrar webbplatsens utseende, läsbarhet och användbarhet. Låt oss titta närmare på var och en av dem.
margin- och padding-egenskaper
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 intilliggande 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örenklad 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 skiljer elementets innehåll från dess marginal.
border: width style color;
Förkortning
border: 4px solid brown;
Det betyder att ramen på alla sidor kommer att se 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!
