Boxeigenschappen voor inline elements

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

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

Webdesign met CSS

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.

CSS blijft in ontwikkeling

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.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt 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.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

In deze video gaan we de bijzonderheden behandelen...

die je gaat tegenkomen, op het moment dat je de box eigenschappen voor inline elementen gaat bepalen.

En dan vooral weer betreffende de margin en de padding.

Open de inline.html .

In de onderste paragraaf staan een aantal inline elementen opgemaakt met het em-element.

Eigenschap hiervan is dat ze naast elkaar samen op één regel kunnen staan.

In het bijbehorende stijlblad inline.css...

Heeft het em-element een achtergrondkleur gekregen.

En de teksten zijn wit gekleurd.

Ik ga aan deze inline elementen een 'margin' toevoegen.

En ik pak eerst een 'margin-left' van tien pixels.

Nu wordt aan de linkerkant van de inline elementen tien pixels afstand aangehouden.

Ga ik kijken wat er gebeurt als ik deze aan de rechterkant ook toe ga passen met margin-right. Ook tien pixels.

En ook de margin naar rechts wordt zonder problemen toegepast.

Dan ga ik nu een margin naar boven en naar beneden toevoegen.

Met een 'margin-top' van tien pixels en een 'margin-bottom' van tien pixels.

Nu zie ik echter niets gebeuren. De margin-top en -bottom worden niet toegepast.

Inline elementen staan namelijk naast elkaar op dezelfde regel.

En de regelafstand wordt bepaald met de interlinie.

Met meer afstand naar boven of beneden zou je plaatselijk de witruimte, de interlinie, tussen de regels gaan vergroten.

En je kunt niet slechts een deel van de interlinie verschuiven.

Interlinies kun je alleen maar groter of kleiner maken met de eigenschap line-height.

Hiermee bepaal je de afstand tussen de regels.

Je kunt wel prima, langs alle zijden, een padding toepassen.

Ik geef één getal op, dat betekent dat deze langs alle zijden wordt toegevoegd.

Je ziet dat hiermee niet de interlinie vergroot wordt, maar wel dat de elementen groter worden.

Ze kunnen zelfs zo groot worden,

dat ze over voorgaande regels en onder volgende regels komen te staan.