Html-elementen die zich gedragen volgens de default instelling noem je ook wel dat deze worden gepositioneerd door de flow. De elementen gaan van zelf naar locatie afhankelijk van de omgeving, net als water in een rivier.
Het positioneren begint met de block-elementen voorbeelden hiervan zijn div, p, h1, h2 etc. Deze nemen uit zich zelf 100% breedte in van het bovenliggende element. Door de property width aan te passen kan hiervan worden afgeweken. Ondanks dat deze een afwijkende breedte hebben zullen ze altijd een complete regel in beslag nemen, zie onderstaande afbeelding.
[afbeelding]
Nu zitten deze elementen standaard strak op elkaar en indien ze kleiner zijn dan het bovenliggende element worden ze links uitgelijnd. Dit is de veranderen met margin, wat is onder te verdelen in margin-top, margin-right, margin-bottom, margin-left. Met de top en bottom is te bepalen wat de minimum ruimte moet zijn t.o.v. het element ervoor en erna.
[afbeelding]
Met margin-left is aan te geven hoeveel ruimte er van links gehouden moet worden, en met margin-right hoeveel ruimte er van rechts gehouden moet worden. Hierdoor zal een element waarbij er geen breedte is opgegeven afhankelijk van het bovenliggende element en deze waardes worden ingekort in de breedte. Als het element wel een gegeven breedte heeft en deze is kleiner dan het bovenliggende element, dan kun je aan deze properties ook de waarde auto mee geven. Dit zorgt er dan voor dat de ruimte links en recht evenredig wordt verdeeld. Zo is het dus mogelijk om elementen te centreren.
[afbeelding]