font-weight | Дебелина на фонт

Тези дисплей видове определят как нашия елемент се подрежда спрямо предните и следващите HTML елементи.

Трябва да се отбележи, че някой елементи в HTML идват с дисплей тип по подразбиране, но той винаги може да бъде сменен с CSS. Така колкото и странно да звучи, може да направим перфектно изглеждаща HTML страница с всичката възможна функционалност, само с използването на елемента "B", който принципно е предназначен само за bold на текст.
display:block;
font-weight:normal;
font-size:35px;
padding:20px;
margin:10px
Ще превърне нашия елемент да изглежда по същия начин като

(H1 - таг за заглавие на страницата)
display:inline;
font-weight:bold;
font-size:12px;
padding:0px;
margin:0px
Ако е поставен върху

елемент, ще го направи да изглежда и работи като

display: inline
Някои inline елементи : SPAN, I, B, A, INPUT, BUTTON

Inline елементите се подреждат вътре в същия ред в който се намират. Например елемента няма да създаде нов ред, а просто ще направи текста bold на същия ред. Този тип елементи имат забранени свойства. Като например width, height, няма да работят, тъй като броузера ги оразмерява автоматично спрямо тяхното съдържание.

display: block
Някои block елементи : DIV, P, H1, H2, HR, UL, LI

Block елементите пък придобиват по подразбиране широчината на реда, като например H1 и DIV. Те могат да имат зададена ширина и височина, но ако зададем ширина, която е например 300px, а пък ширината на контейнера, в който ги слагаме е 1000px, то ще имаме 700px на същия ред, които няма да бъдат запълнени автоматично от нищо.

Единия вариант е да използваме float:left или float:right. Тогава съседните елементи ще запълнят празното пространство, но ще трябва да сложим (clearfix) на контейнера, който съдържа нашия block елемент и всичките други. В противен случай елементите ни може да почнат да се наслагват един върху друг.
display: inline-block
Inline-block елементите пък са най-новото решение на горния проблем. Ако имаме няколко inline-block елемента със зададена ширина и височина. То те ще се подредят на един ред един след друг, докато не стигнат до края му, тогава ще преминат на нов ред.

Примерен inline-block CSS за няколко елемента, които се подравняват отгоре с vertical-align

display:inline-block
vertical-align:top
width:300px
min-height:400px