PADDING- en MARGIN-eigenschappen en hoe u deze kunt gebruiken.

Hallo, beste lezers van de blogsite. Vandaag wil ik doorgaan met het onderwerp van studie en nadenken over de stijlregels waarmee je inspringingen en randen voor HTML-elementen kunt instellen: rand, marge en opvulling.

Voordien slaagden we erin vrij eenvoudige eigenschappen te bestuderen die lettertypen (), tekst () bestuurden en naar het model te kijken

Ja, we zijn er ook in geslaagd om de gebruiksprincipes in detail te bekijken (uitgebreid over meerdere artikelen). Nu is het tijd om verder te gaan met de regels die de basis vormen voor het construeren van documenten (webpagina’s), en we zullen beginnen met het blokmodel (de relatie van HTML-elementen).

In algemene termen heb ik al over moderne technologie geschreven, maar vandaag zullen we pure details hebben. Als u eerdere publicaties over dit onderwerp wilt lezen, bent u van harte welkom op .

Boxmodel in CSS - opvulling, marge en rand

Ten derde kan er gebruik worden gemaakt van rente. Waarvan worden ze gerekend? Dat blijkt vanaf containerbreedte(dat wil zeggen vanuit het inhoudsgebied van het bovenliggende element). Bovendien geldt dit niet alleen voor marge-rechts en links, wat logisch zou zijn, maar ook voor marge-boven en onder worden de percentages nauwkeurig berekend op basis van de breedte (en niet de hoogte) van de container.

Er moet worden opgemerkt dat, als we het hebben over het instellen van dimensionale waarden, Marge kan ook negatief zijn. Die. wanneer we een positieve waarde voor de buitenmarge opgeven, verplaatsen we het aangrenzende element naar de opgegeven afstand, en als we een negatieve waarde opgeven, overlapt het aangrenzende blok eenvoudigweg het blok waarvoor we deze negatieve inspringing hebben ingesteld. En dit wordt heel vaak gebruikt in CSS.

Het spreekt voor zich dat er een geprefabriceerde CSS-margeregel bestaat, waarmee u in veel gevallen de grootte van de code kunt verkleinen die wordt gebruikt om de vereiste externe marges in te stellen. De volgorde van de waarden daarin is strikt gereguleerd (ze worden geschreven via een spatie) en moet overeenkomen met het voorbeeld:

Die. de opsomming begint bovenaan en gaat verder rechtsom totdat de cirkel is voltooid met de juiste inkeping (rechts). Het zou er ongeveer zo uit kunnen zien:

Marge: 20px 10px 40px 30px;

En dit betekent dat de browser boven ons blok 20 pixels moet inspringen, aan de rechterkant - 10, onder - 40 en aan de linkerkant - 30. Dat wil zeggen. deze invoer zou gelijk zijn aan:

De reductie van CSS-code is met het blote oog zichtbaar. Maar dit is niet de limiet. Het is heel acceptabel om niet alleen vier, maar ook drie, twee en zelfs maar één waarde in een geprefabriceerde regel te gebruiken. Wat de codegrootte verder zal helpen verkleinen. Het is echter alleen in bepaalde gevallen mogelijk om het aantal waarden te verminderen:

Als de marges links en rechts hetzelfde zijn, bijvoorbeeld als volgt: margin:20px 30px 40px 30px;
Dat laatste kan achterwege gelaten worden:
Marge: 20px 30px 40px;
Deze twee prefab-regelinvoeren doen hetzelfde. Als u daarom een invoer met drie waarden in Marge ziet, is de waarde van de vierde (aan de rechterkant) te zien in de tweede (aan de linkerkant).
Als de inkepingen boven en onder gelijk zijn, zal zo'n truc niet meer werken, omdat het logischerwijs mogelijk is om de structuur van de invoer van een geprefabriceerde regel te verkleinen, alleen het afsnijden van dubbele waarden vanaf het einde(en de waarde van het onderste streepje is de op één na laatste).
Als er, naast de gelijkheid van de externe marges links en rechts, gelijkheid is van hun waarden bovenaan en onderaan: margin:20px 30px 20px 30px;
of, wat is hetzelfde (vanwege punt 1):
Marge: 20px 30px 20px;
Dan kan zo'n geprefabriceerde regel worden geschreven met slechts twee waarden, waarbij de laatste wordt weggegooid, die samenvalt met de eerste:
Marge:20px 30px;
In dit geval beschrijft de eerste waarde de externe marges verticaal, en de tweede - horizontaal.
En tot slot, als alle waarden in de prefabregel hetzelfde zijn: margin:20px 20px 20px 20px;
of, wat hetzelfde is (vanwege punt 2):
Marge:20px 20px; Dat kan gebruikt worden maximaal verkort recordtype
(waarbij de laatste waarde die overeenkomt met de eerste wordt weggegooid):

Marge:20px; Dat betekent dezelfde marge aan alle kanten van ons HTML-element. Over externe marges gesproken, het is de moeite waard om een dergelijk schema te noemen

"Marge-instorting"

of, met andere woorden, ‘instorting van de marge’. In een notendop is de essentie van dit fenomeen als volgt.

Als we twee blokken onder elkaar hebben (het instorten van marges kan alleen verticaal voorkomen) en beide blokken krijgen tegenovergestelde marges (bijvoorbeeld de onderkant voor het bovenste element en de bovenste marge voor de onderkant), dan zal de grotere margewaarde absorberen de kleinere.

Als het bovenste blok bijvoorbeeld is ingesteld op:

Marge: 20px 20px 200px 20px;

Dan zal de onderste marge van het bovenste blok (200px) de bovenste marge van het onderste blok (100px, en zelfs als deze gelijk wordt aan 199px, zal er niets veranderen) absorberen en de resulterende externe marge tussen deze twee blokken zal nog steeds gelijk zijn aan 200px. Die. alleen de grotere wordt in aanmerking genomen modulo Margin, en het telt op geen enkele manier op met de tegenwaarde van het verticaal aangrenzende element.

Dit is een addertje onder het gras dat uitsluitend verticaal werkt, en horizontaal worden tegengestelde margedimensies eenvoudigweg aan elkaar toegevoegd. Maar dit geldt alleen voor marges met hetzelfde teken, maar als ze verschillende tekens hebben, worden hun cijfers eenvoudigweg opgeteld en worden de blokken van elkaar gescheiden door de resulterende waarde.

In dit geval bijvoorbeeld:

Bovenmarge:20px 20px -20px 20px;

Ondermarge: 10px 20px 20px 20px;

De resulterende marge tussen blokken zal -10px zijn, d.w.z. de onderste overlapt het bovenste HTML-element met 10px. Een ander kenmerk van het gebruik van de margeregel in CSS is dat de opgegeven waarde verticaal voor inline-elementen wordt genegeerd

. Door te vragen:

Marge:20px;

Voor bijvoorbeeld , dat een inline-element is, zien we feitelijk alleen horizontale opvulling en zullen er verticaal geen wijzigingen plaatsvinden.

Als ik wat vooruitkijk, zal ik zeggen dat verticale opvulling voor lijntags zal werken, maar de grotere interne opvulling zal de algehele positie ten opzichte van andere aangrenzende elementen niet beïnvloeden.

In het geval van een bloktag (koppen, alinea's) zou het vergroten van de verticale opvulling dit element verplaatsen ten opzichte van andere aangrenzende blokken.

Welnu, het frame (Border), of beter gezegd de breedte ervan, zal ook niet in staat zijn andere aangrenzende blokken verticaal weg te bewegen van de lijntag. Voor inline-elementen is beweging slechts in één richting mogelijk: horizontaal en dat is alles.

Opvulling en rand - interne opvulling en frames

Laten we nu verder gaan met het instellen van opvulling met behulp van de opvulregel en kijken welke waarden deze precies kan aannemen:

Zoals u kunt zien, wordt hier niet over Auto gesproken, en deze CSS-regel staat het gebruik van negatieve waarden niet toe (ze kunnen alleen positief zijn - vanaf nul en hoger). Die. Er is geen manier om inhoud buiten het frame te duwen met behulp van opvulling. Het maximale dat kan worden gedaan, is de inhoud heel dicht bij het frame brengen. De percentages daarin worden op dezelfde manier berekend als in Marge - relatief aan de breedte van de container (het inhoudsgebied van het bovenliggende element) waarin ons element is ingesloten. wordt gevormd en gehoorzaamt aan dezelfde wetten als hierboven besproken:

Opvulling: 20px 10px 40px 30px;

In deze regel beschrijven we, beginnend vanaf de bovenkant, alle vier de zijden. Als je er iets in wilt reduceren (tot drie, twee of zelfs één waarde), dan zul je de zojuist hierboven beschreven reductieprincipes moeten gebruiken voor externe inspringingen, die met precies hetzelfde succes zullen werken voor interne inspringingen.

En het laatste waar ik vandaag over zou willen nadenken is het raamwerk dat wordt gebruikt Grens. Ze hebben drie soorten parameters:

Randbreedte — stelt de dikte van de rand in
Randkleur — stelt de kleur in
Randstijl - het type kader of het type lijn waarmee het zal worden getekend

Alle drie deze CSS-regels hebben een geldige reeks waarden:

Lijnbreedte voor frame ( Randbreedte) kan worden opgegeven met behulp van getallen in Em, Ex of Px, of in woorden:

Dun - dunne lijn;
Medium - gemiddeld (deze waarde wordt standaard gebruikt);
Dik - dik.

randbreedte: 2px;

Als waarde voor de framekleur ( Randkleur) kunt u de geaccepteerde methoden gebruiken om ze te specificeren (hexadecimale code, woorden, enz.):

Randkleur:rood;

Als de randkleur niet expliciet is opgegeven, wordt standaard de kleur gebruikt die voor het lettertype in het element wordt gebruikt.
Met de CSS-eigenschap Border-style kunt u het randtype in woorden opgeven:

Geen - geen frame (standaard)
Gestippeld - de lijn wordt in stippen getekend
Onderbroken - stippellijn
Effen - ononderbroken lijn
Dubbel - dubbele lijn
Groef - depressief frame
Ridge - uitstekend
Inzet en begin - schaduwspellen

Omdat elk blok vier zijden heeft, kun je uiteraard voor elke zijde zowel algemene als afzonderlijke regels gebruiken:

Hetzelfde zal gelden voor geprefabriceerde grensregels— het kan zowel voor alle zijden tegelijk worden gespecificeerd (Border), als voor elke zijde afzonderlijk (Border-boven, links, onder en rechts). De volgorde van de waarden is niet belangrijk:

Rand: 1px effen rood;

Als u iets mist, wordt in plaats daarvan de standaardwaarde gebruikt.

Veel geluk voor jou! Tot binnenkort op de pagina's van de blogsite

Je kunt meer video's bekijken door naar te gaan

");">

Misschien ben je geïnteresseerd

Hoogte, breedte en overloop - CSS-regels voor het beschrijven van het inhoudsgebied in blokindeling
Positie (absoluut, relatief en vast) - manieren om HTML-elementen in CSS te positioneren (regels links, rechts, boven en onder) Verschillende styling voor interne en externe links via CSS
Zwevend en duidelijk in CSS - bloklay-outtools
Weergave (blok, geen, inline) in CSS - stel het weergavetype van HTML-elementen op de webpagina in

Terwijl ik ronddwaalde op de forums, kwam ik het feit tegen dat de vraag nog steeds rijst: wat doet dat? opvulling, En wat marge, en wat zijn de verschillen daartussen. Daarom heb ik besloten u hieraan te herinneren. Laten we dus, zonder toevlucht te nemen tot duistere zinnen, het probleem stellen en naar een voorbeeld kijken waarin alles duidelijk zal worden.

Taak: op de pagina Ik heb een rood blok nodig(200x200 pixels), welke verdwijnt van de randen van de browser boven en links met respectievelijk 40 en 70 pixels, en de tekst daarbinnen is links en bovenaan ingesprongen met 40 pixels.

Oplossing: kijk naar de afbeelding en de code. Ons rode blok mag niet groter zijn dan 200 bij 200 pixels en moet ingesprongen zijn vanaf de randen van de browser (of andere inhoudsblokken). Eigenlijk maken we deze streepjes via de marge. Als we opvulling uitvoeren, vindt de inkeping plaats binnen ons rode blok en wordt de inspringing verkregen met de achtergrond van het blok zelf (dat wil zeggen rood).

tekst, tekst, veel tekst, veel tekst

Naast de gebruikte eigenschappen (regels 6-9) zijn er ook eigenschappen margin-right, opvulling-rechts, marge-onder, opvulling-onder - deze zijn respectievelijk bedoeld voor inspringen rechts en onder. De waarden voor al deze eigenschappen kunnen in pixels (px), percentages (%) of em-eenheden zijn.

In principe is dat alles. Er zijn echter nog steeds enkele kenmerken van het werken met hen.

Kenmerken van marge en opvulling

Bij gebruik van opvulling moeten de afmetingen van de opvulling worden afgetrokken van de hoogte en breedte van het blok, anders zal de grootte van het blok toenemen met de grootte van de opvulling.

Als een blok de waarden marge-links en marge-rechts van auto krijgt, en als het blok een vaste breedte heeft (bijvoorbeeld 400px) en geen zwevende CSS-eigenschap heeft, wordt dit blok uitgelijnd op het midden van het element waarin het zich bevindt. Voor niet-rubber lay-outs met centrale uitlijning wordt deze uitlijningsmethode meestal gebruikt. Ondanks het feit dat IE 5.5 en eerder de automatische waarde niet ondersteunen, weerhoudt dit u er nog steeds niet van om deze altijd te gebruiken =).

Het is niet raadzaam om opvulling en marge in tabellen te gebruiken, omdat het effect in verschillende browsers onvoorspelbaar zal zijn.

En het laatste wat ik wilde zeggen. Vergeet niet om korte schrijfstructuren te gebruiken, bijvoorbeeld marge: 10px 0 5px 20px;. Als de inspringing nul is, kunt u eenvoudig een nul plaatsen, zonder de parameters op te geven. Het is heel gemakkelijk om te onthouden welke van de parameters betrekking heeft op welke grens - bij een blok gaan de inspringingen met de klok mee: het eerste getal staat bovenaan, het tweede aan de rechterkant, het derde aan de onderkant, het vierde aan de onderkant. links.

Dat is eigenlijk alles wat ik je vandaag wilde vertellen. Fijn weekend allemaal!

Handleiding

Het doel van dit artikel is niet om simpele zaken ingewikkelder te maken, maar om de aandacht te vestigen op bekende standaarden die op de een of andere manier vergeten zijn. Het is belangrijk om in alle aspecten van uw lay-out een betekenisvolle structuur te behouden, en het is net zo belangrijk om u hieraan te houden bij uw inspringing. En een van de belangrijkste principes van lay-out is flexibiliteit. Namelijk de mogelijkheid om gemakkelijk wijzigingen aan te brengen zonder iets kapot te maken. Een goede omgang met marge en opvulling speelt hierbij een zeer belangrijke rol.

De volgende principes worden geïmplementeerd in de omgeving van positioneringselementen op de pagina. Ze worden ook gebruikt in decoratieve elementen. Maar niet zo categorisch.

Basisprincipes:

De inkeping wordt gegeven aan het laatst mogelijke element in het huis.
Voor onafhankelijke elementen (BEM-blok) kunnen geen inspringingen worden ingesteld.
Voor het laatste element van de groep wordt de inspringing (altijd) teruggezet op nul.

Inspringingen gaan van het vorige element naar het volgende.

marges worden ingesteld van het vorige element naar het volgende, van het eerste naar het tweede, van boven naar beneden, van links naar rechts.

Dit betekent dat eigenschappen zoals margin-left en margin-top worden niet gebruikt(niet zonder uitzonderingen). Met opvulling is alles een beetje het tegenovergestelde (behalve dat het wordt gebruikt voor decoratieve doeleinden, het vergroten van het verbindingsgebied, enz.). Wanneer een blok opvulling bovenaan of links nodig heeft, krijgt het dit van de opvulling bovenaan en opvulling links van de ouder.

De inkepingen gaan in de richting van de stroom van de boomhut duwt het blok zichzelf niet.
Aanvankelijk bevindt hij zich in een statische positie en krijgt hij een of andere impact ten koste van anderen.

De inkeping wordt gegeven aan het laatst mogelijke element in het huis

marges worden alleen ingesteld tussen aangrenzende elementen van de boomhut.

In het voorbeeld zijn er 3 lijsten, in de volgende structuur:

Ver, ver weg, voorbij het verbale.

...

De inspringing gaat niet ten koste van onderliggende elementen, maar ten koste van aangrenzende elementen.

In deze situatie is .main-section__item de laatst mogelijke die kan worden ingesprongen om de lijsten van elkaar te scheiden. Hetzelfde effect kan worden bereikt door een div, een lijst, een regel of een link te laten inspringen, maar dit zal niet correct zijn.

Dit voorbeeld is vrij eenvoudig. Maar als je je een veel groter nest voorstelt, waar iemand bezaaid is met inkepingen, wanneer sommige marges instorten. en sommige worden toegevoegd aan opvullingen.

kop in een sectie van zeven woorden

Als we het voorbeeld van een titel nemen, moet u de titel bovenaan laten inspringen. dan is het laatste element een sectie en wordt er opvulling-top voor ingesteld, marge(n) die standaard zijn, moeten altijd opnieuw worden ingesteld.

De eenvoudigste reden waarom u zich aan dit principe moet houden, is om het in de toekomst gemakkelijker te maken de inspringing te vinden, voor u of voor iemand die in de toekomst met uw lay-out gaat werken. Dit gaat over gemak.

De echte problemen kunnen ontstaan wanneer lay-outs met een slechte inspringingsstructuur dynamisch worden weergegeven of worden gedupliceerd.

Inspringingen kunnen niet worden ingesteld voor onafhankelijke elementen (BEM-blok)

Laat nooit elementen inspringen die vaker dan één keer kunnen worden gebruikt. Zelfs als u de methodologieën niet volgt, moet u de zaken in perspectief houden. Daar zijn wikkels voor. Wrappers zijn goed. Of extra lessen.

Als u een blok moet laten inspringen. Zonder vooroordeel gebeurt dit met behulp van:

Overerving door het element (als u dit blok uit het element trekt, zal er geen inkeping zijn en kunt u het eenvoudig op een andere plaats plaatsen).
Een klasse toevoegen (je kunt van een blok een element maken).
Wrapper (zoals een blok dat een rol speelt, alleen bij de positionering).

.block__item > .block (marge-rechts: 10px; ) .block.block__item (marge-rechts: 10px; ) .block-wrap > .block (marge-rechts: 10px; )

Bij het laatste element van de groep wordt de inspringing opnieuw ingesteld op nul (altijd)

Laten we als voorbeeld een lijst en een afbeelding nemen.

Dit is een horizontaal menu en logo (dat om de een of andere reden aan de rechterkant staat).

Voor de laatste li wordt de inspringing teruggezet op nul. En de inkeping is gemaakt tussen aangrenzende elementen ul en img. Wat werd besproken in het tweede principe.

Laten we nog een voorbeeld nemen:

We zijn geïnteresseerd in de marge tussen het nieuws dat is ingesteld.blog-preview__item (margin-bottom: 20px;). De laatste marge wordt opnieuw ingesteld op nul en de onderste inspringing wordt gemaakt door blog-preview op te vullen. Wat werd besproken in het tweede principe.

Vaker dan andere pseudo-klassen zou u:last-child moeten gebruiken.

Item:not(:last-child) ( margin-bottom: 20px; ) // of // .item ( // andere stijlen // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // of margin-top, het hoofdidee hier is niet in de richting van de marge, maar bij afwezigheid van overmaat // .item + .item ( margin-top: 20px; ) // of // .item ( / / andere stijlen // & + & (marge-top: 20px; ) )

Uitzonderingen

Natuurlijk zijn er speciale gevallen, niet-triviale taken en nuances waarin het onmogelijk is om aan deze principes te voldoen, maar verder is het de moeite waard om naar ideale inkepingen te streven om de lay-out zo schoon mogelijk te maken.

P.S. Ik raad u aan de publicatie te lezen

Van de auteur: Toen ik voor het eerst CSS begon te leren, raakte ik steeds in de war over marge en opvulling. Ze leken erg op elkaar en gaven in sommige gevallen hetzelfde resultaat. In deze zelfstudie ziet u het verschil tussen CSS-marge en opvulling, en hoe deze eigenschappen de ruimte tussen elementen op de pagina beïnvloeden. We bespreken ook de instortende marges en het gebruik van verschillende maateenheden bij het maken van responsieve websites. We eindigen het artikel met een paar tips over de lay-out met behulp van marge en opvulling.

Blokmodel

Elementen in CSS worden weergegeven als rechthoekige vakken. De grootte van een rechthoekig blok wordt bepaald door de eigenschappen van het element: inhoud, opvulling, frame, marge.

Het inhoudsgebied van het element bevindt zich in het midden. Vervolgens omringt opvulling het inhoudsgebied. Het frame omringt de opvulling en de marge is de buitenste laag, d.w.z. het bevindt zich buiten het element. Om beter te begrijpen waar we het over hebben, vindt u hieronder een diagram.

Zoals u in het diagram kunt zien, is opvulling een laag die een element uitstrekt van de buitenrand van het inhoudsgebied naar de binnenrand van het frame. Deze eigenschap bepaalt de afstand tussen de rand van het element en de inhoud ervan. Opvulling beïnvloedt de grootte van een element op een pagina, maar heeft geen effect op de afstand tussen elementen op een pagina.

Als u de afstand tussen elementen wilt vergroten of verkleinen, gebruikt u marge. De marge-eigenschap heeft op geen enkele manier invloed op de grootte van het element.

Het is belangrijk om te onthouden dat de afmetingen van alle blokken op een webpagina afhankelijk zijn van het gebruikte blokmodel. Er zijn twee blokmodellen: W3C-blokmodel, traditioneel blokmodel.

Volgens het W3C-blokmodel wordt de breedte van een element berekend op basis van de inhoud van het blok, zonder rekening te houden met opvulling en marge. Bovenop de opgegeven afmetingen worden opvulling en rand toegevoegd, wat tot onverwachte gevolgen kan leiden voor de pagina-indeling.

Laten we bijvoorbeeld een blok nemen met een breedte van 200px en een hoogte van 200px, een opvulling van 10px aan alle kanten en een rand van 2px aan alle kanten. De browser ziet het 200px-blok niet. De browser berekent de horizontale ruimte die nodig is om het blok weer te geven, en deze is 224px: 200(breedte)+2(linkerrand)+10(linker opvulling)+10(rechter opvulling)+2(rechterrand)=224px. Omdat dit een vierkant is, zal de hoogte ook 224px zijn.

Aan de andere kant neemt het traditionele blokmodel de breedte als de som van inhoud, opvulling en rand. Dit betekent dat als uw blok 200 px breed is, de browser de horizontale ruimte berekent die nodig is om het weer te geven, en dat dit 200 px zal zijn, inclusief opvulling en rand. Het resultaat is voorspelbaarder en gemakkelijker om mee te werken.

Standaard gebruiken alle browsers het W3C-blokmodel. Het model kan handmatig worden ingesteld met behulp van de box-sizing eigenschap. Er worden twee waarden geaccepteerd: content-box (W3C) en border-box (traditioneel model). Het traditionele model is intuïtiever, waardoor het het populairst is onder webontwikkelaars.

Hieronder ziet u hoe u box-sizing kunt gebruiken om het traditionele model in uw project te gebruiken:

html ( box-size: border-box; ) *, *:before, *:after ( box-size: overnemen; )

html(

doosgrootte: randdoos;

* , * : voor , * : na (

doosgrootte: erven;

Als je dingen sneller onthoudt als je dingen zelf doet, probeer dan eens te experimenteren met de leuke interactieve demo van Guy Routledge.

Marge en opvulling instellen

U kunt de eigenschappen opvulling-top, opvulling-rechts, opvulling-onder en opvulling-links gebruiken om de opvulling aan alle vier de zijden van een element te bepalen. Opvulling kan ook worden opgegeven via een steno-eigenschap. Als er een enkele opvulwaarde wordt geschreven, gebruikt CSS deze om de opvulling voor alle vier de zijden te bepalen:

/* alle 4 zijden */ opvulling: 10px;

Als er 3 waarden worden gepresenteerd, is de eerste verantwoordelijk voor de bovenkant, de tweede voor links en rechts en de derde voor de onderkant:

/* bovenaan | horizontaal | onderkant */ opvulling: 1em 20px 2em;

Als alle vier de waarden worden gepresenteerd, is elk verantwoordelijk voor respectievelijk boven, rechts, onder en links:

/* bovenaan | juist | onderkant | links */ opvulling: 10px 10% 2em 15%;

In de onderstaande demo is de oranje achtergrond het inhoudsgebied voor verschillende elementen, het witte gebied tussen het frame en de inhoud is opvulling:

De externe marge kan, net als opvulling, aan alle vier de zijden worden beheerd met behulp van de eigenschappen margin-top, margin-right, margin-bottom en margin-left. U kunt ook de marge voor alle vier de zijden tegelijk instellen met behulp van de steno-eigenschap.

/* alle 4 zijden */ marge: 10px; /* verticaal | horizontaal */ marge: 2em 4em; /* bovenaan | horizontaal | onder */ marge: 2em auto 2em; /* bovenaan | juist | onderkant | links */ marge: 10px 10% 2em 15%;

Wat te onthouden

Gebruik de juiste maateenheden

Wanneer u met opvulling en marge werkt, vermijd dan absolute maateenheden. Dergelijke eenheden passen zich niet aan veranderingen in lettergroottes en schermbreedte aan.

Stel dat u de breedte van het element instelt op 50% en de marge op 15 px. Bij een breedte van 1200 px is de breedte van het element 600 px en de marge 15 px. Bij een breedte van 769px zal de breedte van het element 384px zijn en de marge nog steeds 15px.

De breedte van het element veranderde met 36%, maar de marge bleef hetzelfde. In de meeste gevallen is dit niet het grootste probleem. Als u de marge van het element echter op een percentage instelt, heeft u op alle schermen meer controle over de pagina-indeling. Alles ziet er proportioneel uit zonder plotselinge sprongen in de toegepaste marge- en opvullingswaarden.

Op dezelfde manier wilt u misschien opvulling toevoegen aan tekstelementen op de pagina. In de meeste gevallen wilt u dat de opvulling evenredig is aan de lettergrootte van het element. Dit is onmogelijk in absolute eenheden te doen. Als u de opvulling echter op em instelt, wordt deze automatisch aangepast aan de lettergrootte. De onderstaande demo toont schaling in actie.

Hoe browsers de marge en opvulling berekenen voor verschillende meeteenheden

Browsers berekenen de uiteindelijke marge en opvulwaarden verschillend, afhankelijk van de maateenheden.

Marge en opvulling, gespecificeerd als een percentage, worden berekend ten opzichte van de breedte van de container. Dat wil zeggen dat 5% opvulling gelijk is aan 5px als de containerbreedte 100px is, of 50px als de containerbreedte 1000px is. Vergeet niet dat de bovenste en onderste waarden ook worden berekend op basis van de breedte van de container.

In het geval van em zijn de marge en opvulling gebaseerd op de lettergrootte van het element. In de vorige demo was de opvulling op de onderste drie tekstelementen 1em. Vanwege verschillende lettergroottes zal de berekende opvulwaarde altijd anders zijn.

Er zijn ook 4 viewport-meeteenheden vw, vh, vmin en vmax. In dit geval zijn de marge- en opvullingswaarden afhankelijk van de viewport. Opvulling 5vw is bijvoorbeeld gelijk aan 25px met een viewportbreedte van 500px, en opvulling 10vw is gelijk aan 50px op dezelfde viewport. U kunt deze meeteenheden in meer detail bestuderen in het artikel op de SitePoint-website “CSS Viewport of Measures: Quick Start”.

Als u een beginner bent en weet hoe deze eenheden werken, kunt u snel begrijpen waarom de opvulling en marge van HTML-elementen veranderen afhankelijk van de grootte van het bovenliggende lettertype, het lettertype of zelfs de viewport. En dit geeft u de mogelijkheid om uw lay-out te beheren.

Instorting van marges

U moet ook kennis hebben van het concept van instortende marges. In bepaalde situaties kunnen de boven- en ondermarges van twee elementen samenvallen tot één. Dit fenomeen wordt marge-instorting genoemd.

Laten we zeggen dat je twee elementen onder elkaar hebt, d.w.z. op hetzelfde niveau. Als je een marge-onderkant van 40px instelt op het eerste element, en een marge-bovenkant van 25px op het tweede, dan zal de totale marge tussen de elementen niet gelijk zijn aan 65px. De inspringing zal gelijk zijn aan de waarde van de grotere marge, d.w.z. 40px.

Op dezelfde manier kan de marge tussen de ouder en het eerste of laatste kind instorten. Dit gebeurt als er geen rand, opvulling of inline-inhoud is die de onderliggende en bovenliggende marges scheidt. In dit geval, als er geen opvulling of rand op het bovenliggende element zit, zal de marge van het onderliggende element uit het bovenliggende element “vloeien”.

Dit gedrag kan worden gecorrigeerd. Om dit te doen, moet u een barrière toevoegen tussen de bovenliggende en onderliggende marges. De onderstaande demo laat zien hoe het toevoegen van een rand of opvulling aan het bovenliggende element het probleem kan oplossen.

In het geval van negatieve marges is de uiteindelijke waarde van de ingestorte marge gelijk aan de som van de positieve marge met de kleinste negatieve. Je kunt het onderwerp instortende marges gedetailleerder bestuderen in het artikel “Instortende marges” van Adam Roberts.

Interessante manieren om marge en opvulling te gebruiken

Soms kan het gebruik van marge en opvulling lay-outproblemen oplossen. Hieronder staan enkele voorbeelden:

Behoud de beeldverhouding in afbeeldingen

Afbeeldingen op een pagina hebben vaak verschillende beeldverhoudingen. Als u alle afbeeldingen met dezelfde beeldverhouding wilt weergeven, kan CSS-opvulling u helpen.

Om dit te doen, moet u de hoogte van het bovenliggende element op nul instellen en moet de eigenschap opvulling-top van het bovenliggende element gelijk zijn aan de hoogte-breedteverhouding, uitgedrukt als een percentage.

Een beeldverhouding van 16:9 wordt bijvoorbeeld bereikt door opvulling: 56,25% 0 0 0. De waarde 56,25 wordt verkregen door (9/16)*100. Met deze methode kunt u opvullingspercentages voor elke andere beeldverhouding berekenen.

Conclusie

Als je net begint met het leren van CSS, hoop ik dat deze tutorial je heeft geholpen het verschil tussen marge en opvulling te begrijpen. U moet leren hoe u de marge en opvulling kunt instellen met behulp van afkortingen en de juiste maateenheden. In de laatste sectie heb ik twee interessante manieren laten zien om eigenschappen in lay-outs te gebruiken, en heb ik u ook links gegeven naar bronnen voor meer informatie. Als je nog andere tips hebt over CSS-marge en opvulling, plaats deze dan in de reacties.

Deze tutorial zal u helpen CSS-eigenschappen zoals rand, opvulling en marge beter te begrijpen. Deze eigenschappen helpen ontwikkelaars enorm om elementen op de pagina te positioneren volgens de lay-out.

Laten we een div maken en deze de eigenschappen marge, opvulling en rand geven.

Opvullingseigenschap

De eigenschap CSS-opvulling specificeert de afstand tussen de rand van een element en de inhoud ervan. Je kunt het als volgt definiëren:

opvulling bovenaan: 10px;
opvulling rechts: 10px;
opvulling-bodem: 10px;
opvulling links: 10px;

Deze invoer kan worden ingekort:

opvulling: 25px 50px 75px 100px;
- bovenste 25px
- rechts 50px
- onderkant 75px
- links 100px
opvulling: 25px 50px 75px;
- bovenste 25px
- rechts en links 50px
- onderkant 75px
opvulling: 25px 50px;
- boven en onder 25px
- rechts en links 50px
opvulling: 25px;
- allemaal 25px

Let op: de opvulwaarde wordt opgeteld bij de breedte van het element en is afhankelijk van de achtergrond van het element.

Met andere woorden, we hebben een div-element met klasse div-1:

Div.div-1(breedte:150px; opvulling: 25px;)

De browser voegt linker- en rechtervulling toe aan de breedte van het element. Als resultaat krijgen we een element met een breedte van 200px.

Grens eigendom

Met de eigenschap CSS border kunt u de stijl en kleur van de rand van een element definiëren.

grensbreedte

De border-with eigenschap wordt gebruikt om de breedte van de rand te bepalen. De breedte wordt opgegeven in pixels of met een van de vooraf gedefinieerde waarden: dun, medium of dik.

randkleur

De border-color eigenschap wordt gebruikt om de kleur van de rand te definiëren. Kleur kan op de volgende manieren worden ingesteld:

naam - de naam van de kleur, bijvoorbeeld "rood"
RGB - definieert de RGB-waarde, bijvoorbeeld "rgb(255,0,0)"
Hex - definieert een hexadecimale waarde, bijvoorbeeld "#ff0000"

rand-stijl

gestippeld: Definieert een precieze grens
gestormd: definieert een gestippelde rand
stevig: definieert een dikke rand
dubbele: Definieert twee grenzen. De afstand daartussen is afhankelijk van de grensbreedtewaarde
groef: definieert een 3D-verdiepte rand
nok: definieert een convexe 3D-rand
inzet: Definieert de grens zodat het blok wiebelt als het wordt ingedrukt
begin: Definieert een grens zodat het blok convex rolt

U kunt de randeigenschappen van het element in verkorte vorm schrijven:

Div.div-2(rand:1px effen #ccc; )

Marge eigendom

De CSS-marge-eigenschap specificeert de hoeveelheid ruimte rond een element. Marge maakt de ruimte rond het element vrij (buiten de rand). Marge heeft geen achtergrondkleur en is altijd transparant.

U kunt margewaarden voor een element als volgt definiëren:

marge-top:100px;
marge-onder:100px;
marge-rechts:50px;
marge-links: 50px;

Deze invoer kan worden ingekort:

marge: 25px 50px 75px 100px;
- bovenmarge 25px
- rechtermarge 50px
- ondermarge 75px
- linkermarge 100px
marge: 25px 50px 75px;
- bovenmarge 25px
- rechter- en linkermarge 50px
- ondermarge 75px
marge:25px 50px;
- boven- en ondermarge 25px
- rechter- en linkermarge 50px
marge:25px;
- alle vier de marge 25px

Met behulp van de standaardmargewaarden kunt u het blok horizontaal centreren.