[HTML / CSS] margin, padding etc vraag

[flugelisoke]

Ik ben mezelf HTML en CSS aan het leren en daarom volg ik diverse Youtube tutorials. Vaak ben ik gewoon lekker aan het meeklikken en typen en maak ondertussen notities.

Een ding wat ik echter niet helemaal "snap" is dat de mensen uit de tutorial zomaar eventjes uit hun hoofd bijvoorbeeld het volgende neerzetten:

code:

.navbar{
    display:flex;
    align-items: center;
    padding: 20px;
}

nav{
    flex: 1;
    text-align: right;
}

nav ul{
    display: inline-block;
    list-style-type: none;
}

nav ul li{
    display: inline-block;
    margin-right: 20px;

Alsof ze precies weten dat de margin rechts 20px moet zijn en de padding links moet 24px zijn en rechts weer 25px. Hoe zit dit precies? Is er een handigheidje om erachter te komen hoe dat nou werkt met padding en waardes?

[g1n0]

Ik snap niet echt goed wat je vraag is. Wil je nou het verschil tussen margin en padding weten? Of hoe te bepalen welke waardes in te vullen?
Die waardes zijn vaak in eerste instantie natte vinger werk (bij mij), tenzij er styling guidelines zijn die je volgt. Vervolgens ga je de styling exacter finetunen en responsiveness toevoegen.

[flugelisoke]

g1n0 schreef op vrijdag 11 juni 2021 @ 16:19:
Ik snap niet echt goed wat je vraag is. Wil je nou het verschil tussen margin en padding weten? Of hoe te bepalen welke waardes in te vullen?
Die waardes zijn vaak in eerste instantie natte vinger werk (bij mij), tenzij er styling guidelines zijn die je volgt. Vervolgens ga je de styling exacter finetunen en responsiveness toevoegen.

Voornamelijk hoe je makkelijk weet wat de waardes zijn.

Het wordt mij eigenlijk ook niet helemaal duidelijk wanneer ik nou bijvoorbeeld margin en padding en flex etc moet toevoegen bij wat.

[ Voor 11% gewijzigd door flugelisoke op 11-06-2021 16:23 ]

[thaicecube]

flugelisoke schreef op vrijdag 11 juni 2021 @ 16:02:
Is er een handigheidje om erachter te komen hoe dat nou werkt met padding en waardes?

Ervaring?
Als je het vaak genoeg doet heb je er wel een gevoel voor van wat er ongeveer ok uitziet.

Plus je kan het altijd aanpassen.

Dus met 20/25 etc zit je vaak wel goed aan de hand van wat je precies wil.

Net zoiets als dat over het algemeen een font 16px is, en dan in stappen van 2.
dus veel gebruikt is 14/16/18/24/32. maar 15/17/19 zie je dan weer bijna nooit.

flugelisoke schreef op vrijdag 11 juni 2021 @ 16:22:
[...]
Het wordt mij eigenlijk ook niet helemaal duidelijk wanneer ik nou bijvoorbeeld margin en padding en flex etc moet toevoegen bij wat.

Padding is in het element, margin is buiten het element.
flex is een display type, zoals block of inline e.d. Dus dat is weer een heel ander iets.

[erwn]

In je browser kun je met development tools ook vaak "live" de margin/padding van een element aanpassen. Dan kun je het eenvoudig proberen en bekijken. Vervolgens zet je "in één keer" de gewenste waarde in CSS.

[Zeehond]

De browser werkt hier inderdaad erg handig voor, een beetje uitproberen wat mooi uit ziet, samen met andere styling opties, en direct live bijstellen. Zodra je tevreden bent kun je het stuk css code direct naar je .css bestand (of ergens anders) kopiëren . Na een tijd weet je zelf ook redelijk per situatie wel een begin te maken voor je styling wat er goed uit ziet.

[flugelisoke]

Wat handig zeg van die live browser edit! Tnx!

Soms moet je px of % achter een waarde zetten, is dat perse een noodzakelijkheid? Is soms verwarrend of ik nou %, rem, px of etc etc moet gebruiken.

[ Voor 62% gewijzigd door flugelisoke op 11-06-2021 22:45 ]

[g1n0]

flugelisoke schreef op vrijdag 11 juni 2021 @ 16:50:
Wat handig zeg van die live browser edit! Tnx!

Soms moet je px of % achter een waarde zetten, is dat perse een noodzakelijkheid? Is soms verwarrend of ik nou %, rem, px of etc etc moet gebruiken.

% gebruik je vaak om een procentuele (je verwacht het niet) maat aan te geven ten opzichte van het parent element. Vaak gebruik ik de css "calc"-functie, waarmee je % en px kunt combineren.
Ik zou je adviseren nog even lekker in de css courses te duiken. Dan wordt een hoop duidelijk denk ik.

[DJMaze]

flugelisoke schreef op vrijdag 11 juni 2021 @ 16:50:
Wat handig zeg van die live browser edit! Tnx!

Soms moet je px of % achter een waarde zetten, is dat perse een noodzakelijkheid? Is soms verwarrend of ik nou %, rem, px of etc etc moet gebruiken.

rem, em, vh, vw, etc. zijn allemaal waardes in % relatief tot iets.

100vw is dus 100% view width.
Dan moet je wel weten wat de "view width" is.

Veel lezen/leren dus, dan kan je hele leuke dingen maken voor verschillende schermgroottes.

[erwn]

Probeer anders ook je browser window te vergroten / verkleinen. Dan kun je zien welk effect dat heeft bij relatieve maten.

[Ed Vertijsment]

Praktisch antwoord

Als je voor je beroep met HTML/CSS/JS bezig bent is, is er een goede kans dat je niet bezig bent als designer. Dat zijn vaak twee losse beroepen. De marges worden in principe bepaald dor de designer. (Naar mijn voorkeur) op basis van een uitgedachte logica, of op basis van gevoel (wat minder mijn voorkeur heeft om mee te werken).

Als ontwikkelaar lees je het ontwerp, en implementeer je het. Je meet dus de marge tussen X en Y en implementeert die met de bijbehorende code. Waarom er gekozen is voor 24px? Niet echt belangrijk.

Lang antwoord

Marges worden vaak uitgedacht op basis van logica en praktische inzetbaarheid en vaak zijn er maar een beperkt aantal waardes gebruikt. Vaak wordt (voor consistentie, gemak en andere redenen) de layout teruggebracht tot grote arbitraire blokken in een "grid". Dat bestaat uit een X aantal "columns" (vaak 12 voor desktop) met daar tussen "gutters". Soms zijn er gutters aan de buitenzijde van het grid, soms niet. Soms zit er nog een losse padding op het grid naar de eerste kolommen/gutters, soms niet. En soms zit er nog een margin op het grid naar de rand van het venster, soms niet.

In de regel lijnen alle hoofdblokken uit op het begin en het eind van een column, en overspannen daarbij een of meerdere gutters die er tussen liggen. Er ontstaat dus ook een marge (wellicht 24px) tussen de hoofdblokken ten grote van een gutter. 24px zou, in theorie een gutter kunnen zijn, maar dat hangt van het ontwerp af en ik vraag mij af of dat gebruikt wordt voor een YouTube tutorial over CSS.

Qua getallen wordt er vaak gewerkt met nummers die makkelijk deelbaar zijn. Vaak zie je meervouden van 2 of 5 langskomen waarmee een palet (voorbeeld [2, 4, 12, 24, 48]) creëert van mogelijkheden voor spacing. Zulke mogelijkheden of beslissingen worden soms, voor meerdere designaspecten (denk aan kleurgebruik, typografie, afbeelding gebruik) vastgelegd in een "styleguide" dat als referentie kan bieden voor bepaalde waardes (welk font gebruikt ik, welke grootte, met welke kleur of: wat moet de rechter marge zijn.)

Vaak zul je zien dat een ontwerp in de praktijk niet helemaal kloppend is, er wil nog wel eens iets verschuiven waardoor er soms ergens op 23px of 25px uitkomt, dan is het handig om een referentie te hebben van mogelijke waardes op de oorspronkelijke intentie terug te vinden.

Houd er rekening mee dat dat elk team anders werkt, en er ook designers zijn die verwachten een 1 op 1 pixel perfect ontwerp geïmplementeerd te krijgen, dan kun je vaak al je styleguides de deur uit doen. Ander designers werken bepaalde dingen niet eens veder uit in de aanname dat je dat zelf wel kan op basis van de styleguide en een mockup.

[ Voor 4% gewijzigd door Ed Vertijsment op 14-06-2021 11:22 ]

[DJMaze]

Ed Vertijsment schreef op maandag 14 juni 2021 @ 11:14:
Als je voor je beroep met HTML/CSS/JS bezig bent is, is er een goede kans dat je niet bezig bent als designer. Dat zijn vaak twee losse beroepen.

Ik vind het jammer dat velen dit nog zien als losse beroepen.
Hoevaak ik wel niet heb staan vloeken en tieren tegen designers is niet meer te tellen op handen en voeten.
Ze houden totaal geen rekening met de dynamiek van HTML/CSS (telefoon maten, tablet maten, PC scherm maten, televisies, in-car, etc. etc.)

Ik pleit voor "CSS designers" en niet die ouderwetse schoolse DTP'ers.
Mij niet meer gezien bij bedrijven die vinden dat "design" een andere afdeling is (of game designers die denken een webpagina te kunnen designen...).

En een "styleguide" 24px margin kan je overboord gooien op een mobiel
Dat is meer iets van:

Cascading Stylesheet:

margin: 0 min(24px, 2vw);

Ik vind dat @flugelisoke prima vragen heeft om daarover meer te weten te komen.

[ Voor 7% gewijzigd door DJMaze op 14-06-2021 12:35 ]

[Ed Vertijsment]

DJMaze schreef op maandag 14 juni 2021 @ 12:27:
[...]

Ik vind het jammer dat velen dit nog zien als losse beroepen.
Hoevaak ik wel niet heb staan vloeken en tieren tegen designers is niet meer te tellen op handen en voeten.
Ze houden totaal geen rekening met de dynamiek van HTML/CSS (telefoon maten, tablet maten, PC scherm maten, televisies, in-car, etc. etc.)

Maar een designer die wel rekening houd met de dynamiek van een webpagina/applicatie is nog steeds een designer. En zit in de praktijk vaak geen code te typen, ik schets geen beeld van wat fijn zou zijn maar enkel van de praktijk in de meeste gevallen.

Ik pleit voor "CSS designers" en niet die ouderwetse schoolse DTP'ers.
Mij niet meer gezien bij bedrijven die vinden dat "design" een andere afdeling is (of game designers die denken een webpagina te kunnen designen...).

Ik ben het helemaal met je eens, zie ook mijn stuk over designers die systematisch denken of "op gevoel". Vaak zie je dat de tweede categorie een achtergrond heeft in print of andere media. Het web is inderdaad, echt iets anders.

En een "styleguide" 24px margin kan je overboord gooien op een mobiel
Dat is meer iets van:

Cascading Stylesheet:

margin: 0 min(24px, 2vw);

Ik vind dat @flugelisoke prima vragen heeft om daarover meer te weten te komen.

Vaak zie je dat de layout los beschreven staat per device, de implementatie is aan de ontwikkelaar zelf natuurlijk. En 24px kan nog steeds, voor bepaalde dingen, op een mobiel sense maken. Het punt hier in is dat beschreven is welke maten er aangehouden worden en er niet arbitrair een nummer gegokt wordt. Hoe ver en of je dit uitwerkt is per team verschillend.

De vraag van TS is zeker relevant maar meer in de context van een designer dan en een developer, als je vind dat designer meer als developers moeten denken ben ik het helemaal met je eens. Maar dat gezegd hebbende hebben veel developers ook moeite met design denken, en is er ergens dus een goede reden dat deze twee beroepen allebei naast elkaar bestaan.