Boxeigenschappen voor inline block elements

uit de cursus Webdesign & Layout met css (2019)

Volgende video: Uitleg van het css-grid

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Tekst en afbeeldingen vormgeven met css

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Bovenaan de pagina staan afbeeldingen naast elkaar op dezelfde regel.

Dat is een eigenschap van inline-block-elementen, deze kunnen naast elkaar staan.

Afbeeldingen hebben altijd een bepaald formaat, een breedte en een hoogte.

Kijk in de broncode en zie dat aan het img-element de attributen 'width' en 'height' zijn verbonden.

Dat is verplicht voor een afbeelding.

Zonder deze width en height zou de browser niet weten hoeveel ruimte hij moet reserveren.

En dan kan tijdens de opbouw van de pagina, de layout van de pagina verspringen.

Als de browser direct weet hoe breed en hoog afbeeldingen zijn.

Dan kan alvast de ruimte gereserveerd worden.

Typ in het bijbehorende stijlblad 'inline-block.css' een stijl voor de afbeelding.

Gebruik hiervoor de selector img.

Eerst wil ik de begrenzing van de box weten.

En daarvoor ga ik een rand opgeven met de eigenschap border.

Daar horen minstens drie waarden bij.

De randdikte zet ik op één pixel, de soort rand wordt solid en de kleur van de rand zwart.

Dan kies ik er voor om één margin toe te passen van tien pixel langs alle zijden.

De margins worden keurig toegepast.

Daar waar bij block-level-elementen, margins die elkaar raakten, versmolten tot één.

Blijven voor inline-block elementen de margins wel overeind.

Hier is geen sprake van collapsing margins.

Dat is dus een heel duidelijk verschil hoe margins reageren bij een inline-block-element.

Ook is er een duidelijk verschil met een inline element.

Weet je nog dat bij de em-elementen een margin naar boven en naar beneden niet konden worden toegepast?

Omdat je niet plaatselijk de interlinie kunt beïnvloeden?

Een inline-block element doet dit wel.

Afbeeldingen kunnen ook gewoon op een regel tekst staan.

Ik knip één van de afbeeldingen weg met Commando X

en plaats hem midden in de tekst.

Niet alleen het formaat van de afbeelding maar ook de opgegeven margin zorgt nu voor een enorm grote regelafstand.

Het inline-block element heeft dus weer unieke eigenschappen ten opzichte van het block-level element en het inline element.

Pas ik voor de volledigheid ook nog even een padding toe van dertig pixels. Dan zie je dit.

Het formaat van de afbeelding staat vast.

Dat is de ruimte die de afbeelding inneemt.

Maar door de padding is er minder ruimte in het contentgebied beschikbaar .

Waardoor automatisch de afbeelding kleiner wordt gemaakt.