Relativt utfyllnadsvärde. Hur man ställer in CSS-marginal och utfyllnad (och coola layouttips). Saker att komma ihåg

Från författaren: När jag först började lära mig CSS blev jag förvirrad över marginaler och utfyllnad hela tiden. De verkade väldigt lika, och gav i vissa fall samma resultat. I den här handledningen kommer du att se skillnaden mellan CSS-marginaler och utfyllnad, och hur dessa egenskaper påverkar utrymmet mellan elementen på en sida. Vi kommer också att diskutera kollapsande marginaler genom att använda olika måttenheter när vi bygger responsiva sajter. Vi avslutar artikeln med ett par layouttips med marginal och utfyllnad.

blockmodell

Element i CSS representeras som rektangulära rutor. Storleken på det rektangulära blocket bestäms av elementets egenskaper: innehåll, stoppning, ram, marginal.

Elementets innehållsområde är placerat i mitten. Ytterligare utfyllnad omger innehållsområdet. Bården omger stoppningen och marginalen är det yttre lagret, d.v.s. det är utanför elementet. För att bättre förstå vad som står på spel visas ett diagram nedan.

Som du kan se i diagrammet är utfyllnad ett lager som sträcker sig ett element från den yttre kanten av innehållsområdet till ramens inre kant. Den här egenskapen styr avståndet mellan ett elements kant och dess innehåll. Utfyllnad påverkar storleken på ett element på en sida, men det påverkar inte avståndet mellan elementen på en sida.

Om du behöver öka eller minska avståndet mellan elementen, använd marginal. Margin-egenskapen påverkar inte storleken på elementet på något sätt.

Det är viktigt att komma ihåg att storleken på alla block på en webbsida beror på vilken boxmodell som används. Det finns två lådmodeller: W3C lådmodell, traditionell lådmodell.

Enligt W3C-boxmodellen beräknas bredden på ett element utifrån boxens innehåll utan hänsyn till stoppning och marginal. Vaddering och kant läggs ovanpå givna dimensioner, vilket kan leda till oförutsägbara konsekvenser för sidlayouten.

Låt oss till exempel ta ett block med en bredd på 200px och en höjd på 200px, stoppning på 10px på alla sidor och en kant på 2px på alla sidor. Webbläsaren ser inte 200px-blocket. Webbläsaren beräknar det horisontella utrymmet som behövs för att visa blocket, och det är 224px: 200(bredd)+2(vänster kant)+10(vänster utfyllnad)+10(höger utfyllnad)+2(höger kant)=224px. Eftersom det är en kvadrat blir höjden också 224px.

Å andra sidan tar den traditionella boxmodellen summan av innehåll, stoppningar och kant som bredd. Detta betyder att om ditt block är 200px brett, kommer webbläsaren att beräkna det horisontella utrymme som behövs för att visa det, och det kommer att vara 200px, inklusive utfyllnad och kant. Resultatet är mer förutsägbart och lättare att arbeta med.

Som standard använder alla webbläsare W3C-boxmodellen. Modellen kan ställas in manuellt med egenskapen box-sizing. De två värdena som accepteras är content-box (W3C) och border-box (traditionell). Den traditionella modellen är mer intuitiv, vilket har gjort den till den mest populära bland webbutvecklare.

Följande visar hur du använder den traditionella modellen i ditt projekt med boxstorlek:

html ( box-sizing: border-box; ) *, *:före, *:efter ( box-sizing: ärva; )

Om du kommer ihåg snabbare när du gör något själv, testa då att experimentera med en rolig interaktiv demo från Guy Routledge.

Inställning av marginaler och stoppning

Egenskaperna padding-top , padding-right , padding-bottom och padding-left styr utfyllnaden på alla fyra sidor av ett element. Du kan också ställa in utfyllnad via en stenografi-egenskap. Om ett enda utfyllnadsvärde skrivs använder CSS det för att bestämma utfyllnaden för alla fyra sidorna:

/* alla 4 sidorna */ stoppning: 10px;

Om det finns 3 värden är det första för topp, det andra för vänster och höger och det tredje för botten:

/* topp | horisontell | botten */ stoppning: 1em 20px 2em;

Om alla 4 värden är närvarande, är var och en ansvarig för topp, höger, botten och vänster, respektive:

/* topp | höger | botten | vänster */ stoppning: 10px 10% 2em 15%;

I demon nedan är den orange bakgrunden innehållsområdet för de olika elementen, det vita området mellan kanten och innehållet är stoppningen:

Utfyllnad kan styras på alla 4 sidor, precis som utfyllnad, med egenskaperna marginal-topp , marginal-höger , marginal-botten och marginal-vänster. Marginal kan också ställas in för alla fyra sidorna samtidigt med stenografiegenskapen.

/* alla 4 sidorna */ marginal: 10px; /* vertikal | horisontell */ marginal: 2em 4em; /* topp | horisontell | botten */ marginal: 2em auto 2em; /* topp | höger | botten | vänster */ marginal: 10px 10% 2em 15%;

Saker att komma ihåg

Använd rätt måttenheter

Undvik absoluta enheter när du arbetar med stoppning och marginal. Sådana enheter anpassar sig inte till förändringar i teckenstorlekar och skärmbredder.

Låt oss säga att du ställer in ett elements bredd till 50 % och en marginal på 15 px. Vid 1200px bred kommer elementets bredd att vara 600px och marginalen kommer fortfarande att vara 15px. Vid 769px bred kommer elementets bredd att vara 384px och marginalen kommer fortfarande att vara 15px.

Elementets bredd har förändrats med 36 %, medan dess marginal har förblivit densamma. I de flesta fall är detta inte det största problemet. Men om du ställer in elementets marginal som en procentandel får du bättre kontroll över layouten på sidan på alla skärmar. Allt kommer att se proportionellt ut utan plötsliga hopp i värdena för den tillämpade marginalen och stoppningen.

På liknande sätt kanske du vill lägga till utfyllnad till textelement på sidan. I de flesta fall vill du att utfyllnaden ska vara proportionell mot teckenstorleken på elementet. Det är omöjligt att göra detta på absoluta enheter. Men om du ställer in utfyllnad till em, kommer den automatiskt att anpassas för att passa teckenstorleken. Demon nedan visar zoom in action.

Hur webbläsare beräknar marginal och utfyllnad för olika enheter

Webbläsare beräknar slutvärdena för marginal och utfyllnad olika beroende på måttenheterna.

Marginal och stoppning, angivna i procent, beräknas i förhållande till behållarens bredd. Så utfyllnad 5 % blir 5 px om behållaren är 100 px bred, eller 50 px om behållaren är 1 000 px bred. Glöm inte att de övre och nedre värdena också beräknas av behållarens bredd.

När det gäller ems baseras värdet på marginal och utfyllnad på elementets teckenstorlek. I den tidigare demon är stoppningen på de tre nedersta textelementen 1em. På grund av olika teckenstorlekar kommer det beräknade utfyllnadsvärdet alltid att vara annorlunda.

Det finns också 4 viewport-enheter vw, vh, vmin och vmax. I det här fallet kommer marginal- och utfyllnadsvärdena att bero på visningsporten. Till exempel skulle utfyllnad 5vw vara 25px på en 500px viewport, och utfyllnad 10vw skulle vara 50px på samma viewport. Du kan lära dig mer om dessa måttenheter i SitePoint-artikeln "CSS Viewport Mätenheter: Snabbstart".

Om du är ny, kommer du att veta hur dessa enheter fungerar att snabbt förstå varför utfyllnad och marginaler på HTML-element ändras beroende på storleken på föräldern, teckensnittet eller till och med visningsporten. Och detta ger dig möjlighet att kontrollera din layout.

Minska marginaler

Du måste också vara medveten om konceptet med kollapsande marginaler. I vissa situationer kan den övre och nedre marginalen på två element kollapsa till en. Detta fenomen kallas marginalkollaps.

Låt oss säga att du har två element under varandra, dvs. på samma nivå. Om du ställer in margin-bottom till 40px på det första elementet och 25px på det andra elementet, kommer den totala marginalen mellan elementen inte att vara lika med 65px. Indraget blir lika med värdet av den större marginalen, dvs. 40px.

På samma sätt kan marginaler kollapsa mellan föräldern och det första eller sista barnet. Detta händer om det inte finns någon kantlinje, utfyllnad eller inlineinnehåll som skiljer barn- och överordnadsmarginalerna åt. I det här fallet, om det inte finns någon utfyllnad eller kant på föräldern, kommer det underordnade elementets marginal att "flyta" från föräldern.

Du kan fixa detta beteende. För att göra detta måste du lägga till en barriär mellan den överordnade marginalen och den underordnade marginalen. Demon nedan visar hur man löser problemet genom att lägga till en kantlinje eller utfyllnad till det överordnade elementet.

Vid negativa marginaler är det slutliga värdet av den kollapsade marginalen summan av den positiva marginalen plus den minsta negativa marginalen. Du kan lära dig mer om kollapsande marginaler i Margin Collapsing av Adam Roberts.

Intressanta sätt att använda marginal och stoppning

Ibland kan användning av marginaler och utfyllnad lösa layoutproblem. Flera exempel beskrivs nedan:

Behåll bildförhållandet i bilder

Ofta har bilderna på sidan olika bildförhållande. Om du behöver visa alla bilder med samma bildförhållande hjälper CSS-utfyllnad dig.

För att göra detta måste du ställa in höjden på föräldern till noll, och padding-top-egenskapen för föräldern måste vara lika med värdet på bildförhållandet, uttryckt i procent.

Till exempel uppnås ett bildförhållande på 16:9 genom utfyllnad: 56,25% 0 0 0. Värdet 56,25 erhålls av (9/16)*100. Med den här metoden kan du beräkna utfyllnadsprocent för alla andra bildförhållande.

Slutsats

Om du är ny på CSS hoppas jag att den här handledningen hjälpte dig att förstå skillnaden mellan marginal och utfyllnad. Du måste lära dig att definiera marginal och utfyllnad i termer av förkortningar och lämpliga enheter. I det sista avsnittet visade jag två intressanta sätt tillämpa egenskaper på layouter och gav dig länkar till resurser för vidare lärande. Om du har några andra CSS-marginaler och utfyllnadstips, skriv dem i kommentarerna.

Beskrivning

Ställer in värdet på marginalerna runt elementets innehåll. En marginal är avståndet från den inre kanten av ett elements ram till en tänkt rektangel som begränsar dess innehåll (Figur 1).

Utfyllnadsegenskapen låter dig ställa in utfyllnadsvärdet för alla sidor av elementet samtidigt, eller att definiera det endast för de angivna sidorna.

Syntax

utfyllnad: [värde | procent] (1, 4) | ärva

Värderingar

Det är tillåtet att använda ett, två, tre eller fyra värden, separera dem med ett mellanslag. Effekten beror på antalet värden och anges i tabell. ett.

Marginaler kan anges i pixlar (px), procentsatser (%) eller andra CSS-vänliga enheter. Arvvärdet indikerar att det ärvt från föräldern. När du anger en marginal i procent, beräknas värdet från bredden på elementets överordnade.

HTML5 CSS2.1 IE Cr Op Sa Fx

Resultat detta exempel visad i fig. 2.

Ris. 2. Tillämpa padding-egenskapen

Objektmodell

document.getElementById("elementID ").style.padding

Webbläsare

Internet Explorer upp till version 7.0 stöder inte ärvt värde.

I föregående kapitel nämnde vi sådana CSS-egenskaper, som marginal (fält) och utfyllnad (indrag). Nu kommer vi att uppehålla oss mer i detalj och överväga hur de skiljer sig från varandra och vilka funktioner de har.

Du kan skapa mellanrum mellan element på båda sätten, men om utfyllnad är indraget från innehållet till kanten av blocket, är marginalen avståndet från ett block till ett annat, mellanrummet mellan blocken. Skärmdumpen visar ett bra exempel:

Utfyllnad separerar innehåll från blockkanten, medan marginal skapar luckor mellan block

Som du kan se är CSS-marginaler och utfyllnad olika, även om det ibland utan att titta på koden är omöjligt att avgöra vilken egenskap som används för att ställa in avståndet. Detta händer när det inte finns någon ram eller bakgrund för innehållsblocket.

För att ställa in marginal eller utfyllnad i CSS från varje sida av ett element, finns det följande egenskaper:

Indrag:

• stoppning topp: menande;
• utfyllnad-höger: menande;
• padding-bottom: menande;
• stoppning-vänster: menande;

Fält:

• marginal-top: menande;
• marginal-höger: menande;
• marginal-botten: menande;
• marginal-vänster: menande;

Värden kan anges i valfri CSS-enhet - px, em, %, etc. Exempel: margin-top: 15px .

Det finns också en väldigt praktisk sak som CSS-stenografi för marginal och stoppning. Om du behöver ställa in marginaler eller utfyllnad för alla fyra sidor av ett element, är det inte nödvändigt att skriva en egenskap för varje sida separat. Allt görs enklare: för marginal och utfyllnad kan du ange 1, 2, 3 eller 4 värden på en gång. Hur inställningarna fördelas beror på antalet värden:

• 4 värden: utfyllnad ställs in för alla sidor av elementet i följande ordning: topp, höger, botten, vänster: utfyllnad: 2px 4px 5px 10px;
• 3 värden: utfyllnad ställs in först för ovansidan, sedan både för vänster och höger, och sedan för botten: utfyllnad: 3px 6px 9px;
• 2 värden: utfyllnad ställs först in samtidigt från över- och undersidan, och sedan - samtidigt för vänster och höger sida: utfyllnad: 6px 12px;
• 1 värde: ställ in samma utfyllnad för alla sidor av elementet: utfyllnad: 3px;

Samma regler gäller för CSS-marginalegenskapen. Observera att du också kan använda negativa värden för marginal (till exempel -3px), vilket ibland kan vara ganska användbart.

kollapsande marginal

Föreställ dig situationen: två blockelement ligger ovanpå varandra och de ges marginaler. För övre blocket inställd på marginal: 60px och den nedersta till marginal: 30px . Det skulle vara logiskt att anta att de två gränsande marginalerna för två element helt enkelt skulle beröra varandra, och som ett resultat skulle gapet mellan blocken vara 90 pixlar.

Men saker och ting är annorlunda. Faktum är att i en sådan situation manifesteras en effekt, som kallas kollaps, när den största i storlek väljs från två intilliggande elementfält. I vårt exempel blir det resulterande gapet mellan element 60 pixlar.

Komprimerade marginaler fungerar bara för de övre och nedre marginalerna på element, och gäller inte marginaler på höger och vänster sida. Det slutliga värdet av gapet beräknas i olika situationer på olika sätt:

• När båda marginalvärdena är positiva kommer den slutliga marginalstorleken att vara det större värdet.
• Om ett av värdena är negativt måste summan av värdena erhållas för att beräkna fältstorleken. Till exempel, med värden på 20px och -18px, kommer fältstorleken att vara:
  20 + (-18) = 20 - 18 = 2 pixlar.
• Om båda värdena är negativa, jämförs modulen för dessa siffror och talet med den större modulo väljs (därav det minsta av de negativa talen). Exempel: du vill jämföra värdena för fälten -6px och -8px. Modulerna för de jämförda talen är 6 respektive 8. Därav följer att 6-8. Den slutliga fältstorleken är -8 pixlar.
• Om värdena anges i olika CSS-enheter, reduceras de till en, varefter de jämförs och det större värdet väljs.
• Storleken på marginalen för underordnade element är ännu mer intressant: om barnet har en större marginal än föräldern, prioriteras det. I det här fallet blir storleken på den övre och nedre marginalen på föräldern densamma som för barnet. I det här fallet blir det inget avstånd mellan föräldern och barnet.

Beskrivning

Ställer in värdet på marginalerna runt elementets innehåll. En marginal är avståndet från den inre kanten av ett elements ram till en tänkt rektangel som begränsar dess innehåll (Figur 1).

Utfyllnadsegenskapen låter dig ställa in utfyllnadsvärdet för alla sidor av elementet samtidigt, eller att definiera det endast för de angivna sidorna.

Syntax

utfyllnad: [värde | procent] (1, 4) | ärva

Värderingar

Det är tillåtet att använda ett, två, tre eller fyra värden, separera dem med ett mellanslag. Effekten beror på antalet värden och anges i tabell. ett.

Marginaler kan anges i pixlar (px), procentsatser (%) eller andra CSS-vänliga enheter. Arvvärdet indikerar att det ärvt från föräldern. När du anger en marginal i procent, beräknas värdet från bredden på elementets överordnade.

HTML5 CSS2.1 IE Cr Op Sa Fx

Resultatet av detta exempel visas i fig. 2.

Ris. 2. Tillämpa padding-egenskapen

Objektmodell

document.getElementById("elementID ").style.padding

Webbläsare

Internet Explorer upp till version 7.0 stöder inte ärvt värde.

Låt mig berätta just nu, det här är en mycket viktig läxa. Efter att ha studerat det kommer du att kunna ordna element på sidan, sätta indrag mellan dem, skapa dem i ett separat specifikt block, ställa in marginaler.

stoppning

Utfyllnad är en egenskap som anger mängden utfyllnad ett element har från den inre kanten av kanten till innehållet. Innehållet kan vara vanlig text, en bild eller ett underordnat element som också kan ha sina egna marginaler.

Enheter kan vara pixlar (px) eller procentsatser (%).

#blockera(
stoppning: 12px /* utfyllnad från blockkanterna till innehållet - det kommer att finnas 12 pixlar på alla sidor */
}

Det är möjligt att endast ange ett fält på en specifik sida:

vadderad topp- en egenskap som skapar marginaler på toppen.
stoppning rätt- en egenskap som skapar fält till höger.
stoppning-botten- egenskap som skapar bottenmarginaler.
stoppning-vänster- en egenskap som skapar marginaler till vänster.

#blockera(
stoppning-botten: 25px /* nedre marginal 25px */
padding-vänster: 15px; /* vänster marginal 15px */
}

Som du märkte, om du anger fält från 2 eller 3 sidor på detta sätt kommer du att få en lång kod. Det finns en förkortning för utfyllnadsegenskapen för detta. Alla 4 värden är indikerade i tur och ordning i den - från varje kant på en rad går rörelsen medurs, med början från toppen:

Stoppning: Toppstoppning höger stoppning Bottenstoppning vänster;

#blockera(
stoppning: 25px 10px 15px 6px; /* övre 25px, höger 10px, nedre 15px, vänster 6px */
}

marginal

Marginegenskapen, till skillnad från utfyllnad, ställer in mängden utfyllnad mellan elementens kanter.
Om elementet är ett barn, är stoppningen utrymmet från elementets kant till den inre kanten av förälderns kant.
Om elementet inte har någon förälder, anses indraget vara det fria utrymmet som egenskapen sätter till kanterna av gränsen för de omgivande elementen.

#blockera(
marginal: 4px
}

För att endast ange indrag på vissa sidor finns följande egenskaper:

marginal-top- en egenskap som skapar indrag uppifrån.
marginal-höger- en egenskap som skapar indrag till höger.
marginal-botten- egenskap som skapar indrag underifrån.
marginal-vänster- en egenskap som skapar indrag till vänster.

Liksom utfyllnadsegenskapen har marginalen också förmågan att förkorta värden för olika sidor. Rörelsen går medurs, från den övre marginalen:

Marginal: övre marginal höger marginal Marginal nedre marginal vänster;

#blockera(
marginal: 15px 10px 5px 25px; /* övre 15px, höger 10px, nedre 5px, vänster 25px */
}

Tack för din uppmärksamhet!