Základní vlastnosti prvků

Každý HTML prvek má na webové stránce vymezený určitý prostor, který je možné upravovat pomocí níže uvedených vlastností.

Základní vlastnosti jsou rozměry, tedy šířka (width) a výška (height), které jsou na obrázku vyznačené modrou barvou. Rozměry je možné zadávat ve více jednotkách - px, cm, mm, %, rem aj.  
Padding jsou vnitřní okraje, které vytváří prostor mezi obsahem prvku a případným rámečkem. 
Border vykresluje rámeček. Jedná se o složenou vlastnost mající tři hodnoty: barvu, tloušťku a styl čáry. Lze upravit konkrétní vlastnost; border-color, border-width, border-style; 
Margin vytváří vnější okraje prvku, čímž kolem něho vytváří volný prostor.  Oproti dříve zmíněným vlastnostem není přičítán do celkových rozměrů elementu. 

Vlastnosti padding i margin lze zapisovat více způsoby - mohou obsahovat jednu, ale i více hodnot. Maximálně však čtyři hodnoty - pro každou stranu zvlášť.

margin: 5px;
Okolo prvku bude všude 5px volného místa.

margin: 5px 15px;
Uvedený zápis mající dvě hodnoty aplikuje 5px vlevo a vpravo. 15px vykreslí na vrhu a vespod prvku.

margin: 15px 5px 10px 5px;
Zápis čítající 4 hodnoty aplikuje uvedené hodnoty v následujícím pořadí: top, right, bottom a left.

margin-left: 5px; , margin-top: 15px; , margin-bottom: 15px; margin-right: 5px;
Zde jsou mezery rozepsány pro každou stranu jednotlivě. 

Režim zobrazení prvku

V kapitole HTML bylo zmíněno, že existují blokové a řádkové elementy, které se s jistými rozdíly vykreslují na stránkách. V případě potřeby je možné změnit způsob zobrazení prvků pomocí vlastnosti display. 

display: block;

display: inline;
Změní-li se hodnota na inline, prvky zabírají místa v závislosti na svém obsahu. Jsou běžně zobrazeny v řadě.  V takovém případě nejsou aplikovány vlastnosti margin, padding, width ani height.  

display: inline-block;
Jedná se o kombinaci dvou výše zmíněných vlastností. Prvky zabírají místa podle svého obsahu a jsou za sebou seřazeny v řadě bez ukončení řádku. Současně se také aplikují vlastnosti margin, padding, width a height.  

Existují další hodnoty vlastnosti display, ty jsou ale u specifických prvků. Jedná se například o seznamy, tabulky. Pomocí display:none; je možné prvek úplně skrýt. Moderní verze prohlížečů dovedou využít display:flex;, což je zápis v mnohém usnadňující responzibilitu stránek.