1. Display — element qanday ko'rinadi?

Har bir HTML element default holda biror ko'rinishga ega. display xossasi buni boshqaradi. 3 ta asosiy qiymat bor:

block

Butun qatorni egallaydi. Har biri yangi qatordan boshlanadi. width va height berish mumkin. Misol: <div>, <p>, <h1>.

inline

Faqat o'z kontenti qadar joy oladi. Yangi qatorga o'tmaydi. width/height berib bo'lmaydi. Misol: <span>, <a>, <strong>.

inline-block

inline va block aralashmasi. Yangi qatorga o'tmaydi (inline kabi), lekin width/height berish mumkin (block kabi). Juda qulay.

1.a { display: block; }
2.b { display: inline; }
3.c { display: inline-block; }

2. Margin — tashqi bo'shliq

margin — element va boshqa elementlar ORASIDAGI bo'shliq. Ya'ni elementni atrofidagi havo.

1/* Barcha tomonga */
2.a { margin: 20px; }
3
4/* Yuqori va past, chap va o'ng */
5.b { margin: 10px 20px; }
6
7/* Yuqori, o'ng, past, chap (soat yo'nalishida) */
8.c { margin: 10px 20px 30px 40px; }
9
10/* Alohida tomonlar */
11.d {
12  margin-top: 10px;
13  margin-right: 20px;
14  margin-bottom: 10px;
15  margin-left: 20px;
16}

3. Padding — ichki bo'shliq

padding — elementning ICHIDAGI bo'shliq. Ya'ni chegara va kontent orasidagi havo. Yozilishi xuddi margin kabi.

1.karta {
2  padding: 16px;            /* 4 tomondan */
3  padding: 16px 24px;       /* tepa-past, chap-o'ng */
4  padding: 8px 12px 16px 12px;
5}

4. Box Model — CSSning yuragi

CSSda har bir element — bu quti. Uning 4 qismi bor (ichdan tashqariga):

1. Content — asosiy kontent (matn, rasm).
2. Padding — kontent va chegara orasidagi bo'shliq.
3. Border — chegara.
4. Margin — boshqa elementlar bilan orasidagi bo'shliq.

1/* Bu qoida deyarli HAR BIR loyihaning boshida turadi: */
2* {
3  box-sizing: border-box;
4}
5
6/* Endi width aynan 200px bo'ladi, padding va border ichiga oladi */
7.quti {
8  width: 200px;
9  padding: 20px;
10  border: 2px solid black;
11}

5. Overflow — sig'magan kontent

Agar element ichidagi kontent qutiga sig'masa, uni qanday ko'rsatish kerak? Shuni overflow boshqaradi:

• visible — default. Kontent qutidan chiqib ketadi.
• hidden — sig'magan qismi yashirinadi.
• scroll — doim scroll chiziqchasi ko'rinadi.
• auto — faqat kerak bo'lganda scroll chiqadi.

1.quti {
2  width: 200px;
3  height: 100px;
4  overflow: auto;
5}