Wat is opvulling? CSS-marge en opvulling instellen (en coole lay-outtips)

Vandaag zullen we werken aan het begrijpen van het verschil tussen HTML-opvulling ( opvulling) en marge ( marge) in CSS. Maar laten we eerst hun syntaxis begrijpen. Er zijn verschillende manieren om deze eigenschappen te schrijven: normaal en steno:

Opvulling en marge in CSS

De normale notatievorm voor de betreffende eigenschappen is gemakkelijker te begrijpen omdat deze vergelijkbaar is met alle andere stijlnotaties:

Reguliere toegang:

opvulling bovenaan: 10px;

opvulling rechts: 20px; opvulling-bodem: 10px; « opvulling links: 20px;«.

Aan de andere kant combineert de CSS-steno al deze eigenschappen in één

algemeen bezit

opvulling Korte vermelding: opvulling: 10px 20px 40px 10px;

Opvulling en marge hebben vier waarden: boven, rechts, onder en links. De bovenstaande verkorte notatie specificeert ook vier waarden, gescheiden door een spatie. De eerste van vier waarden is de bovenste inspringing, vervolgens de rechter inspringing, de onderste (

opvulling onderste HTML ) en aan de linkerkant: vulling: RECHTSBOVEN LINKSONDER; (vulling: rechtsboven linksonder)

Deze invoer kan worden teruggebracht tot drie waarden als de linker en rechter opvulling/marge hetzelfde zijn. Als de bovenmarge bijvoorbeeld 30 px is, de linker- en rechtermarge 10 px en de onderkant 40 px, dan kunt u

het volgende formulier

inzendingen:

opvulling: 30px 10px 40px;

We reduceren het tot twee waarden!

Als de opvulling/marge boven en onder hetzelfde zijn, en de opvulling/marge rechts en links ook hetzelfde zijn, kunnen er slechts twee waarden worden opgegeven. In dit voorbeeld hebben we een opvulling boven en onder van 10px, en een opvulling links en rechts van 20px. Onze CSS ziet er als volgt uit: vulling: BOVEN/ONDER RECHTS/LINKS; (opvulling: boven/onder rechts/links) opvulling: 10px 20px; Slechts één betekenis! Ons nieuwste versie

afkorting voor opvulling en marge HTML bevat slechts één waarde. Deze notatie kan worden gebruikt als alle inspringingen ( boven, onder, rechts en links) hebben dezelfde betekenis. Als we wilden dat alle zijden een opvulling van 20px hadden, zou de CSS er als volgt uitzien:

Wanneer welk opnameformaat gebruiken? Als ik bijvoorbeeld een element alleen een ondermarge hoef te geven, zou ik dit gebruiken

Er is een merkbaar verschil tussen deze twee eigenschappen. Opvulling wordt gebruikt om ruimte binnen de container van een HTML-element te definiëren. Marge wordt gebruikt om de ruimte rond de buitenrand van elementen te definiëren.

Stel je voor dat je een winterjas aantrekt. De jas is een deel van jou, maar als ik verf naar je zou gooien, zou het een groter gebied bestrijken dan wanneer je die jas niet zou dragen.

Je kunt opvulling ook als opvulling beschouwen kartonnen doos. Wanneer je een doos met schuim vult, gebruik je dit om de inhoud weg te houden van de randen van de doos. Opvulling in CSS doet hetzelfde.

Beschouw de marge nu als een onzichtbaar krachtveld om je heen. Het krachtveld houdt andere dingen van je weg. Terugkomend op het voorbeeld van de jas en verf: als ik verf naar je zou gooien en het zou door het krachtveld kunnen gaan, zou het nog steeds alleen jou en je jas bedekken.

PADDING en MARGE op het voorbeeld van een site

Laten we eigenschappen bekijken met behulp van voorbeelden met elementen. We beginnen met een paragraaf (tag

), voeg er vervolgens een achtergrondkleur aan toe en voeg aan elke kant een opvulling van 30 px toe.

Linksonder zie je dat het een alinea is met een opvulling van 30px eromheen. In de afbeelding rechts heb ik gebruikt Google-tools Chrome om aan te geven waar de HTML-opvulling voor dit element begint/eindigt. Groente in de onderstaande afbeelding ziet u de opvulling die rond de container is geplaatst. De donkerblauwe achtergrondkleur vult het binnengebied:

Laten we nu een marge aan de alinea toevoegen. Ik voeg 30px bovenste en onderste opvulling toe, evenals 20px links en rechts. De afbeelding linksonder laat zien hoe deze paragraaf is veranderd ten opzichte van de marge. De werkelijke breedte van de afbeelding is kleiner geworden omdat de marge wegduwt van de randen van de ander HTML-element. Aan de rechterkant zie je dat oranje– dit is de marge rond het element. de marge ligt altijd buiten de opvulling en de donkerblauwe achtergrond reikt niet tot in het margegebied.

Laten we eens kijken wat verschil marge van opvulling. Laten we hiervoor nogmaals het blokmodel in CSS onthouden.

MARGE - dit is de afstand vanaf de rand (frame) van het blok tot de dichtstbijzijnde elementen, of, als die er niet zijn, tot de randen van het document.

PADDING - zoals een interne afstand tussen de rand (frame) en de inhoud van het blok.

Voorbeeld: Laten we drie stijlen maken voor drie verschillende alinea's, met verschillende marge- en opvulwaarden, en naar het resultaat kijken:

Die. waarden worden met de klok mee geschreven: boven, rechts, onder, links.

In welke gevallen is het beter om inspringing te gebruiken en in welke gevallen is het beter om marges te gebruiken?

Een paar belangrijke verschillen:

Inspringingen (opvulling) bevinden zich binnen het blok en marges (marge) bevinden zich daarbuiten;

De blokachtergrond en achtergrondafbeelding zijn alleen van toepassing op opvulling, niet op marges. Marges zijn altijd transparant, waardoor de achtergrond van het bovenliggende element zichtbaar is.

14. Hoogte en breedte van blokken

Standaard worden de hoogte en breedte van blokken automatisch bepaald, d.w.z. hoe meer tekst (of andere inhoud) hoe breder en hoger het blok.

Maar met behulp van CSS-technologie kunnen we de breedte en hoogte instellen van de blokken die we nodig hebben.

HOOGTE– een eigenschap die de hoogte van het blok bepaalt;

BREEDTE– een eigenschap die de breedte van het blok instelt;

Meestal wordt het element gebruikt als blokken in CSS DIV. De eigenschappen width en height kunnen echter ook worden toegepast op alinea's, lijsten, enz.

Laten we 4 klassen maken en deze één voor één toewijzen aan dezelfde box (in in dit geval DIV) met tekst.

Nu staat de hoogte vast en wordt de breedte uitgerekt om bij de inhoud te passen.

Hier staan ​​zowel de hoogte als de breedte vast.

En dit is een voorbeeld van hoe een doos met een vaste breedte en hoogte eruit komt te zien als de inhoud er niet in past. De tekst gaat simpelweg verder dan het blok.

Opmerking!

Door de breedte van een blok op te geven, specificeert u dus alleen de breedte van dat deel van het blok dat gereserveerd is voor inhoud.

200?"200px"+(deze.scrollHeight+5)+"px");">

Kenmerken van marge en opvulling

Bron: Marge of opvulling?
Philip Sporrer.
Vertaling: vl49.

Wanneer is het beter om marges te gebruiken en wanneer opvulling voor opmaakdoeleinden, en maakt dit enig verschil?

Ik heb heel lang geworsteld op zoek naar passende antwoorden. En pas na het schrijven van veel vreselijke, onleesbare CSS-code, vergezeld van verschillende bijwerkingen, kon ik met vertrouwen zeggen dat ik de fundamentele, ijzersterke regels met betrekking tot de hierboven genoemde kwesties had gevonden.

Voor de duidelijkheid gaan we naar typische situatie, wat waarschijnlijk bekend is bij elke ontwikkelaar gebruikersinterface in 2017. We hebben een eenvoudig kaartsjabloon.

IN in dit voorbeeld Er zijn twee soorten intervallen:

Het is heel belangrijk om hier te begrijpen dat we te maken hebben met twee verschillende concepten die bij elkaar niet met elkaar in verband mogen worden gebracht. Dat wil zeggen, als ik de afstand tussen de kaarten en hun container moet wijzigen, bijvoorbeeld naar 24 pixels, dan zou dit op geen enkele manier de afstand tussen de kaarten zelf moeten beïnvloeden.

Het voorbeeld implementeren met CSS?

Er zijn letterlijk duizenden manieren om een ​​sjabloon als deze te maken met behulp van marges en opvulling, maar ik zou er graag een willen presenteren die het juiste gebruik van de marge- en opvullingseigenschappen demonstreert. Bovendien kunt u met deze methode in de toekomst andere kaarten toevoegen.

Container (
opvulling: 16px;
}
.kaart + .kaart (
marge: 0 0 0 8px;
}

Slechts 2 selectors en 2 regels.

Welke functie heeft het plusteken?

Symbool + vertegenwoordigt aangrenzende keuzeschakelaar. Het verwijst alleen naar het element dat onmiddellijk volgt op het element dat vóór deze selector is opgegeven.

Zoals je kunt zien in de afbeelding hierboven, selecteert deze selector in ons geval elke kaart die wordt voorafgegaan door een andere kaart. Met behulp van de aangrenzende selector kunnen we dus de linkermarge voor elke kaart instellen, behalve de eerste.

Dit betekent dat we de mogelijkheid hebben om elk gewenst aantal kaarten toe te voegen, waarbij de onderlinge afstand altijd acht pixels zal zijn.

Alles werkt prima totdat we iets anders dan een kaart naast de kaarten moeten plaatsen. Nou ja, laten we zeggen een knop "Kaart toevoegen" ("Kaart toevoegen"):

Afgaande op het bestaande CSS-codefragment zouden we hoogstwaarschijnlijk de klasse .card niet toewijzen aan het nieuwe element dat de knop vertegenwoordigt, omdat het geen kaart is. Hoe kan dit? Is het de moeite waard om hiervoor een extra klassenaam .add-card te maken, die ook een regel bevat? marge eigendom wat is de .card-klasse? Nee, er is een betere oplossing.

Lobotomiseerde uil *++*.

Hoe ziet het eruit? Ondanks de grappige associatie werkt deze methode prima en ik gebruik hem voortdurend sinds ik van het bestaan ​​ervan hoorde. Dus waar gaat dit allemaal over? Hier is een blik op de bijbehorende CSS-code:

Container (
opvulling: 16px;
}
/* Nou, heb je de uil met lobotomie herkend? 😜 */
.container > * + * (
marge: 0 0 0 8px;
}

Zoals u zich wellicht herinnert, was de vorige selector van toepassing op elke kaart die werd voorafgegaan door een andere kaart. Nu kunnen we met zijn hulp formatteren elk element onmiddellijk daarvoor een ander element, inclusief de knop uiteraard.

Op het einde.

Ik hoop oprecht dat het hier gepresenteerde materiaal u heeft geholpen te begrijpen wanneer u opvulling moet gebruiken en wanneer u marges moet gebruiken om inhoud binnen een container te scheiden.

Als gevolg hiervan zou ik ter overweging een penproject willen presenteren waarin de bovenstaande voorbeelden worden gedemonstreerd, evenals de voorbeelden die zijn getest op eigen ervaring twee regels. Laten we dus gebruiken:

opvulling— voor ruimtes tussen de container en de inhoud ervan.

marge— voor ruimtes tussen elementen in de container.

Organisatie van inspringingen in de lay-out (marge/opvulling)

• CSS
• HTML

• 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 het inspringen. 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:

1. De inkeping wordt gegeven aan het laatst mogelijke element in het huis.
2. Voor onafhankelijke elementen (BEM-blok) kunnen geen inspringingen worden ingesteld.
3. U laatste onderdeel groepen, wordt de inspringing op nul gezet (altijd).

Inspringingen gaan van het vorige element naar het volgende.

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

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

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 zal het laatste element een sectie zijn en wordt er opvulling-top voor ingesteld, marge(n) die standaard zijn moeten altijd opnieuw worden ingesteld.

Het meest simpele reden waar het de moeite waard is om je aan te houden dit principe, dit is om het gemakkelijker te maken om de inspringing in de toekomst 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 horizontale menukaart en het 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