De basisprincipes van CSS-opvulling begrijpen

click fraud protection

CSS-padding is een van de eigenschappen van de CSS-boxmodel. Deze steno-eigenschap stelt de opvulling in rond alle vier de zijden van een HTML-element. CSS-opvulling kan worden toegepast op bijna elke HTML-tag (behalve enkele van de tabeltags). Bovendien kunnen alle vier de zijden van het element een verschillende waarde hebben.

CSS-opvullingseigenschap

Om de verkorte CSS-opvullingseigenschap te gebruiken, kunt u het geheugensteuntje "TRouBLe" (of "TRiBbLe" voor uw Star Trek-fans) gebruiken. Dit staat voor top, Rechtsaf, bodem, en links, en het verwijst naar de volgorde van de opvulbreedtes die u instelt in de steno-eigenschap. Bijvoorbeeld:

opvulling: rechtsboven linksonder;
opvulling: 1px 2px 3px 6px;

Als u de hierboven vermelde waarden zou gebruiken, zou het een andere opvulwaarde toepassen op elke kant van het HTML-element waarop u het toepast. Als u dezelfde opvulling op alle vier de zijden wilt toepassen, kunt u uw CSS en schrijf gewoon een waarde:

opvulling: 12px;

Met die CSS-regel zouden 12 pixels opvulling van toepassing zijn op alle 4 zijden van het element.

instagram viewer

Als u wilt dat de opvulling hetzelfde is voor boven en onder en links en rechts, kunt u twee waarden schrijven:

opvulling: 24px 48px;

De eerste waarde (24px) zou van toepassing zijn op de boven- en onderkant, terwijl de tweede van toepassing zou zijn op links en rechts.

Als u drie waarden schrijft, wordt de horizontale opvulling (links en rechts) hetzelfde, terwijl de boven- en onderkant worden gewijzigd:

opvulling: rechtsboven en linksonder;
opvulling: 0px 1px 3px;

Volgens het CSS-boxmodel ligt opvulling het dichtst bij het element/de inhoud zelf. Dit betekent dat opvulling wordt toegevoegd aan een element tussen de inhoudsbreedte of -hoogte en eventuele randwaarden die u gebruikt. Als de opvulling is ingesteld op nul, heeft deze dezelfde rand als de inhoud.

CSS-opvulwaarden

CSS-opvulling kan elke niet-negatieve lengtewaarde aannemen. Zorg ervoor dat u de maat opgeeft, zoals px of em. U kunt ook een percentage voor uw opvulling opgeven, wat een percentage is van de breedte van het bevattende blok van het element. Dit omvat vulling aan de boven- en onderkant. Bijvoorbeeld:

#container {breedte: 800px; hoogte: 200px; }
#container p { breedte: 400px; hoogte: 75%; opvulling: 25% 0; }

De hoogte van de alinea binnen de #container element zal 75% zijn van de #container’s hoogte plus 25% van de breedte voor de bovenste opvulling en 25% van de breedte voor de onderste opvulling. Dit is in totaal 300 + 200 + 200 = 700px.

Effecten van het toevoegen van CSS-opvulling

Aan elementen op blokniveau, de vulling is aan de vier zijden aangebracht. Omdat het element al een blok of doos is, wordt de opvulling aangebracht op de zijkanten van de doos.

Wanneer CSS-opvulling wordt toegevoegd aan inline-elementen, kan er enige overlapping zijn van elementen boven en onder het inline-element als de verticale opvulling de lijnhoogte overschrijdt, maar de lijnhoogte wordt niet omlaag gedrukt. Horizontale CSS-opvulling toegepast op inline-elementen wordt toegevoegd aan het begin van het element en het einde van het element. En de opvulling kan lijnen omwikkelen. Maar het is niet van toepassing op alle regels van een element met meerdere regels, dus u kunt geen opvulling gebruiken om een ​​segment van inline-inhoud met meerdere regels te laten inspringen.

In CSS2.1 kunt u ook geen containerblokken maken waarbij de breedte afhankelijk is van een element met percentages voor breedtes (of opvulbreedtes). Als u dit doet, is het resultaat niet gedefinieerd. Browsers zullen nog steeds de inhoud weergeven, maar het kan zijn dat u niet de resultaten krijgt die u verwacht. Als je erover nadenkt, is het logisch, alsof je containerelement de breedte van zijn onderliggende elementen moet weten om de breedte te definiëren - zoals wanneer het geen vooraf gedefinieerde breedte heeft, en een of meer heeft een breedte die is ingesteld als een percentage van het containerelement, wordt hiermee een cirkelvormige ketting zonder antwoord. Als u percentages gebruikt voor de breedte van iets in uw document, moet u ervoor zorgen dat de bovenliggende elementbreedten ook zijn gedefinieerd.

instagram story viewer