Học về css để trang trí các trang web html

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.35 MB, 202 trang )

Giới thiệu về CSS
CSS giúp ích rất nhiều khi viết một trang web bằng HTML.
CSS là gì?

CSS là viết tắt của Cascading Style Sheets.

CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương tiện
khác.

CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang trên một
website.

Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.
Ví dụ về CSS - một trang HTML với nhiều kiểu cách khác nhau
Dưới đây là ví dụ về một trang HTML hiển thị với 4 stylesheet khác nhau.

Một trang HTML với 4 kiểu stylesheet và khi không dùng stylesheet
Vì sao nên dùng CSS?
CSS được dùng để định nghĩa kiểu cách cho các trang trên website của bạn, gồm cả
thiết kế, dàn trang và các cách hiển thị khác nhau trên nhiều thiết bị với kích thước màn
hình khác nhau.
CSS giúp giải quyết vấn đề lớn của HTML
HTML không có phần tử để để định dạng cho trang web. HTML chỉ được dùng để tạo
nội dung cho trang. Khi các phần tử như <font> và thuộc tính màu sắc được thêm vào
HTML 3.2, cơn ác mộng của các nhà phát triển web bắt đầu. Việc phát triển một
website lớn mà thêm thông tin font hay màu sắc vào từng trang đòi hỏi rất nhiều thời
gian.
Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS, giúp loại
bỏ việc định dạng kiểu cách khỏi trang HTML.Các định nghĩa liên quan đến kiểu cách
được đưa vào tập tin .css và nhờ vào tập tin stylesheet ngoài, bạn có thể thay đổi toàn

bộ website chỉ bằng một tập tin duy nhất.

Cú pháp và Selector trong CSS
Cú pháp CSS

Bộ quy tắc của CSS gồm có công cụ chọn (selector) và khối khai báo (declaration).
Công cụ chọn trỏ tới phần từ HTML mà bạn muốn tạo kiểu cách. Khối khai báo chứa
một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo
gồm tên và giá trị đặc tính CSS, phân tách bằng dấu phẩy.
Khai báo CSS luôn kết thúc bằng dấu chấm phẩy, khối khai báo nằm trong các dấu
ngoặc móc. Trong ví dụ dưới đây, các phần tử

sẽ được căn giữa, chữ màu đỏ.
p {
color: red;
text-align: center;
}

CSS Selector
Công cụ chọn trong CSS dùng để tìm (và chọn) phần tử HTML dựa trên tên, id, class,
thuộc tính… của phần tử.
Element Selector
Đây là công cụ chọn phần tử dựa vào tên phần tử. Bạn có thể chọn tất cả các phần
tử

trên trang như dưới đây (trong trường hợp này, tất cả phần tử

sẽ được căn
giữa và có màu đỏ).
p {
text-align: center;
color: red;
}

id Selector

Công cụ này dùng thuộc tính id của phần tử HTML để chọn. id của một phần tử trong
trang phải là độc nhất nên id Selector dùng để chọn một phần tử duy nhất.
Để chọn phần tử bằng id, dùng kí tự # phía trước, sau đó là id của phần tử. Quy định
kiểu cách dưới đây sẽ áp dụng cho phần tử HTML có id=”para1”.
#para1 {
text-align: center;
color: red;
}
Lưu ý: Tên id không thể

bắt đầu bằng số.

class Selector
Công cụ này chọn phần tử bằng thuộc tính class. Để chọn, viết kí tự (.) sau đó là tên
lớp. Ở ví dụ dưới đây, tất cả các phần tử HTML có class="center" sẽ có màu đỏ và
được căn giữa.
.center {
text-align: center;
color: red;
}

Bạn có thể chỉ định chỉ những phần tử HTML nhất định là chịu tác động của class. Ở
ví dụ dưới đây chỉ phần tử

có class="center" là được căn giữa.
p.center {
text-align: center;
color: red;
}

Phần tử HTML có thể tham chiếu tới nhiều hơn một lớp. Ở ví dụ dưới đây, phần
tử

được tạo kiểu cách theo class="center" và class="large" .

Đoạn văn sử dụng hai lớp.

Lưu ý: tên class không thể bắt đầu bằng số.
Group Selector
Nếu có các phần tử cùng kiểu cách như thế này:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

Bạn có thể nhóm các công cụ chọn lại để tối giản hóa code, các công cụ chọn phân
tách bằng dấu phẩy. Dưới đây là cách nhóm các công cụ chọn bên trên.
h1, h2, p {
text-align: center;
color: red;
}

Comment trong CSS
Comment được dùng để giải thích đoạn mã, có thể giúp chỉnh sửa lại mã nguồn về sau
khi cần. Trình duyệt sẽ không hiển thị các comment. Comment trong CSS bắt đầu
bằng /* và kết thúc bằng */ và có thể trải dài trên nhiều dòng.

p {
color: red;
/* Đây là bình luận một dòng */
text-align: center;
}
/* Đây là
bình luận
nhiều dòng */

Hãy thử cả đoạn code dưới đây và xem cách trình duyệt hiển thị trong ảnh bên dưới.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}

</style>
</head>
<body>

Tiêu đề này được giữ nguyên

Tiêu đề này có màu đỏ và được căn giữa.

Tiêu đề này có màu đỏ, được căn giữa và có kích thước
to.

</body>
</html>

Dùng công cụ chọn để tạo kiểu cách cho phần tử HTML

Cách chèn CSS để tạo kiểu cách cho trang HTML (Vị trí đặt CSS)
Khi trình duyệt đọc tập tin định dạng (stylesheet), nó sẽ định dạng văn bản HTML theo
thông tin trong tập tin định dạng đó.
3 cách thêm CSS
Có 3 cách để thêm tập tin định dạng cho văn bản HTML.

Tập tin định dạng nội bộ

Tập tin định dạng ngoài

Nội dòng
Tập tin định dạng ngoài
Với một style sheet ngoài, bạn có thay đổi diện mạo của cả website mà chỉ cần thay đổi
một tập tin duy nhất, Mỗi trang sẽ có tham chiếu tới tập tin ngoài này trong phần
tử <link> nằm trong phần <head> .
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Tập tin định dạng ngoài có thể được viết trên bất kì trình soạn thảo nào, không chứa
phần tử HTML và phải được lưu với phần mở rộng là .css.
Đây là ví dụ về một phần trong tập tin style sheet.
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Lưu ý: Không thêm khoảng trắng giữa giá trị đặc tính và đơn vị (như thế này marginleft: 20 px ;). mà phải viết như sau: margin-left: 20px;
Tập tin định dạng nội bộ
Nên dùng tập tin này khi mỗi trang có một kiểu định dạng khác nhau, được định nghĩa
bằng phần tử <style> và nằm trong phần <head> của trang HTML.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Định dạng nội dòng
Nên dùng kiểu định dạng này nếu áp dụng một kiểu định dạng riêng cho một phần tử
riêng. Để áp dụng, thêm thuộc tính style cho phần tử liên quan, thuộc tính style có thể
chứa đặc tính CSS. Ví dụ dưới đây cho thấy cách thay đổi màu sắc và căn lề cho phần
tử

.

Tiêu đề

Nhiều tập tin định dạng
Nếu nhiều đặc tính được định nghĩa cho cùng một Selector (phần tử) trong các tập tin
định dạng khác nhau, có thể dùng giá trị từ lần đọc style sheet gần nhất. Giả sử một
style sheet ngoài định dạng phần tử

như sau:
h1 {
color: navy;
}

rồi một style sheet nội bộ định dạng cho phần tử

như thế này:
h1 {
color: orange;
}

Nếu định dạng nội bộ được định nghĩa sau đường dẫn tới style sheet ngoài, phần
tử

sẽ có màu da cam.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Nhưng nếu định dạng nội bộ được định nghĩa trước thì phần tử

sẽ có màu xanh
navy.
<head>
<style>
h1 {

color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Thứ tự phân tầng
Nên dùng kiểu định dạng nào khi có nhiều hơn một kiểu cho một phần tử HTML?
Thường thứ tự áp dụng kiểu định dạng tuân theo cấp bậc từ cao xuống thấp như sau:

Định dạng nội dòng (bên trong phần tử HTML)

Các tập tin định dạng nội bộ và bên ngoài (trong phần head)

Mặc định của trình duyệt
Định dạng nội dòng (bên trong phần tử HTML) được ưu tiên cao nhất, tức là có thể ghi
đè định dạng được định nghĩa trong thẻ <head> hoặc tập tin style sheet ngoài hoặc giá
trị mặc định của trình duyệt.

Màu sắc trong CSS (CSS – Color)
Tương tự HTML, trong CSS, màu sắc được chỉ định bằng tên màu định sẵn hoặc các
giá trị RGB, HEX, HSL, RGBA và HSLA.
Tên màu
Trong HTML, màu sắc có thể được chỉ định bằng tên màu. HTML hỗ trợ 140 tên màu
chuẩn. Bạn đọc xem thêm tại bài viết Màu sắc trong HTML.
Màu nền
Bạn có thể chọn màu nền cho phần tử trong HTML

Xin chào

Quản trị

Màu văn bản

Tương tự, văn bản cũng có thể dùng nhiều màu sắc.

Xin chào

Tôi là...

Màu viền

Bạn cũng có thể thay đổi màu viền.

Xin chào

Giá trị màu
Trong HTML, màu sắc còn được xác định bằng giá trị RGB, HEX, HSL, RGBA hoặc
HSLA. Các đoạn code sau đều cho ra màu giống “Tomato”.

...

Còn đây là khi đặt giá trị trong suốt là 50%.

...

Giá trị RGB

Màu RGB sử dụng công thức
rgb(red, green, blue)

Mỗi thông số red (đỏ), green (xanh lá cây), blue (xanh dương) cho biết mức độ của

màu đó, nằm trong khoảng từ 0 tới 255.
Ví dụ rgb(255, 0, 0) là màu đỏ vì đỏ có giá trị cao nhất còn xanh lá cây và xanh dương
là 0.
Giá trị màu đen là (0, 0, 0) và giá trị màu trắng là (255, 255, 255). Gam màu xám được
tạo bằng cách dùng 3 giá trị bằng nhau.

rgb(0, 0,
0)

rgb(60,
60, 60)

rgb(120, 120, 120)

Giá trị HEX
Màu sắc trong HTML cũng có thể được chỉ định bằng giá trị hệ thập lục phân
(hexadecimal) dưới dạng:
#rrggbb

Trong đó rr (red), gg (green) và bb (blue) là các giá trị hệ thập lục phân, nằm giữa 00 và
ff (tương tự 0 - 255 trong hệ thập phân). #ff0000 sẽ là màu đỏ vì đỏ có giá trị cao nhất
(ff) còn 2 màu xanh lá cây và xanh dương có giá trị bằng 0. Gam màu xám cũng được
dùng bằng cách cho 3 giá trị bằng nhau.

#ff0000

#3cb371

Giá trị HSL

Màu sắc cũng có thể được chỉ định bằng các giá trị vùng màu (hue), độ bão hòa
(saturation) và độ sáng (lightness) viết tắt thành HSL, dưới dạng:
hsl(hue, saturation, lightness)

Vùng màu là mức độ của màu trên vòng màu sắc, từ 0 tới 360. 0 là đỏ, 120 là xanh lá
và 240 là xanh dương.
Độ bão hòa là giá trị phần trăm, thể hiện độ tinh khiết của màu, 0% nghĩa là gam xám
và 100% là màu tinh khiết.
Độ sáng đo bằng phần trăm, 0% là đen, 50% là không sáng không tối và 100% là trắng.

Độ bão hòa
Độ bão hòa dùng để mô tả độ tinh khiết, đậm đặc của màu:




100% là tinh khiết hoàn toàn, không có ám xám.
50% là 50% xám, nhưng vẫn có thể nhìn thấy màu.
0% là hoàn toàn xám, không thể thấy màu nữa.

50%)

hsl(0, 100%,
80%, 50%); color:#ffffff;">hsl(0, 80%,

50%, 50%); color:#ffffff;">hsl(0, 50%,
20%, 50%); color:#ffffff;">hsl(0, 20%,
0%, 50%); color:#ffffff;">hsl(0, 0%,

Độ sáng
Độ sáng cho biết bạn muốn lấy màu sáng đến mức nào, 0% nghĩa là không sáng (đen),
50% là không sáng không tối còn 100% là sáng hoàn toàn (trắng).

20%)

80%)

hsl(0, 100%,
100%, 20%); color:#ffffff;">hsl(0, 100%,
100%, 50%); color:#ffffff;">hsl(0, 100%,
100%, 80%); color:#ffffff;">hsl(0, 100%,
100%, 100%); color:#000000;">hsl(0, 100%,

Để có màu gam xám thường đặt độ bão hòa và vùng màu về 0, độ sáng từ 0% tới
100% để lấy sắc xám tối/sáng hơn.

25%)

50%)

hsl(0, 0%, 0%)

0%, 25%); color:#ffffff;">hsl(0, 0%,
0%, 50%); color:#ffffff;">hsl(0, 0%,
0%, 70%); color:#ffffff;">hsl(0, 0%,

Giá trị RGBA

Giá trị màu RGBA là phần mở rộng của màu RGB, bổ sung thêm kênh alpha - xác định
độ trong suốt của màu, với công thức:
rgba (red, green, blue, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không
trong suốt).

rgba(255, 99,
71, 0)

rgba(255,

99, 71, 0.4)

rgba(255,
99, 71, 0.8)

rgba(255, 99,
71, 1)

Giá trị màu HSLA

Giá trị màu HSLA là bản mở rộng của HSL, bổ sung thêm kênh alpha - xác định độ
trong suốt của màu, với công thức:
hsl(hue, saturation, lightness, alpha)

Trong đó thông số alpha nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) tới 1.0 (không
trong suốt).

100%, 64%, 0.4)

64%, 1)

100%, 64%, 0); color:#000000;">hsl(9, 100%,
100%, 64%, 0.4); color:#000000;">hsl(9,
100%, 64%, 0.8); color:#000000;">hsl(9,
100%, 64%, 1); color:#000000;">hsl(9, 100%,

Nền trong CSS (CSS – Background)
Đặc tính nền trong CSS được dùng để định nghĩa hiệu ứng nền cho các phần tử. Các
đặc tính của nền trong CSS gồm:





Màu

background-color
background-image
background-repeat
background-attachment
background-position
nền

Đặc tính backgroud-color xác định màu nền cho phần tử.
body {
background-color: lightblue;
}

Màu sắc trong CSS thường được xác định bằng

tên màu, như “red”...

giá trị màu HEX, như #ff0000…

giá trị RGB, như rgb(255,0,0)...
Trong ví dụ dưới đây, các phần tử

,
và <div> có màu nền khác nhau.
h1 {
background-color: green;
}
div {

background-color: lightblue;

}

p {
background-color: yellow;
}

Ảnh nền
Đặc tính background-image lấy hình ảnh làm nền cho phần tử. Mặc định ảnh sẽ được
sao chép lặp lại để bao phủ toàn bộ phần tử.
body {
background-image: url("paper.gif");
}

Lưu ý là khi dùng ảnh làm nền, đừng để nó chèn lên hay làm cho chữ khó đọc.
Ảnh nền lặp đi lặp lại theo chiều dọc và ngang
Mặc định đặc tính background-image sẽ lặp đi lặp lại theo cả chiều ngang và chiều dọc
để bao phủ toàn bộ phần tử. Một số ảnh chỉ nên lặp theo 1 chiều, nếu không trông sẽ
rất xấu. Khi đó hãy dùng thêm đặc tính background-repeat: repeat-x; để lặp theo
chiều ngang và background-repeat: repeat-y; để lặp theo chiều dọc.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Ảnh nền, đặt vị trí và không lặp lại
Để lấy một ảnh làm nền và không muốn lặp lại thì dùng đặc tính background-repeat.
body {
background-image: url("img_trejpg");
background-repeat: no-repeat;
}

Hình ảnh xuất hiện một lần trên trang

Ở ví dụ trên ảnh chỉ xuất hiện một lần và sẽ hiển thị ở cùng chỗ với văn bản. Vậy ta nên
đổi vị trí ảnh bằng đặc tính background-position.
body {
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}

Ảnh không còn chèn vào chữ khi đổi vị trí
Ảnh nền, cố định vị trí
Để chỉ định ảnh nền cố định (không bị cuộn theo cả trang), dùng đặc tính backgroundattachment.
body {
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Khi cuộn trang, ảnh vẫn ở nguyên vị trí ban đầu
Ảnh nền, đặc tính rút gọn
Để rút ngắn code, bạn có thể chỉ định tất cả các đặc tính cho nền trong một đặc tính
duy nhất, đây gọi là đặc tính rút gọn. Đặc tính rút gọn của nền là background.
body {
background: #ffffff url("img_tree.jpg") no-repeat right top;
}

Khi dùng đặc tính rút gọn, thứ tự các giá trị sẽ là






background-color
background-image
background-repeat
background-attachment
background-position

Chỉ cần viết theo đúng thứ tự, không nhất thiết phải đầy đủ các đặc tính.

Border trong CSS (CSS – Border)
Đặc tính border trong CSS cho phép xác định kiểu cách, độ rộng và màu sắc cho viền
của một phần tử.

Kiểu cách của đường viền trong CSS
Đặc tính border-style xác định kiểu đường viền sẽ hiển thị. Các giá trị có thể sử dụng
gồm:




dotter - đường chấm chấm
dashed - đường nét đứt
solid - đường nét thẳng









double - đường kép
groove
ridge
inset
outset
none - không đường viền
hidden - đường viền ẩn

Đặc tính border-property có thể có từ 1 tới 4 giá trị (trên, dưới, trái, phải)

Hình ảnh hiển thị các kiểu đường viền nói trên
Lưu ý: Không một đặc tính đường viền CSS nào dưới đây có tác dụng nếu chưa chọn
đặc tính border-style cho nó.
Độ rộng của đường viền
Đặc tính border-width xác định độ rộng của 4 đường viền, có thể bằng các đơn vị như
in, px, pt, cm, em… hoặc bằng cách dùng 1 trong 3 giá trị định sẵn là thin (mỏng),
medium (trung bình) và thick (dày).
Đặc tính border-width có thể có từ 1 tới 4 giá trị trên, dưới, trái, phải.

Đặc tính border-width xác định độ rộng đường viền

Màu sắc đường viền trong CSS
Đặc tính border-color được dùng để chọn màu cho 4 đường viền. Màu sắc trong
CSScó thể chọn bằng:
name: Tên cụ thể như “red”...
Hex: Giá trị HEX như #ff0000…
RGB: Giá trị RGB như rgb(255, 0, 0)...
transparent: Trong suốt






Đặc tính border-color có từ 1 tới 4 giá trị (trên, dưới, trái, phải) nếu không được đặt,
nó sẽ lấy theo màu của phần tử.

Chọn màu cho viền của phần tử
Đường viền cho từng cạnh trong CSS
Ở các ví dụ trên bạn đã thấy có thể chọn nhiều kiểu viền cho từng cạnh, trong CSS,
còn có các đặc tính xác định cho từng cạnh của đường viền (trên, dưới, trái, phải).
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Đoạn code trên đây sẽ cho ra kết quả giống hệt như thế này.
p {

border-style: dotted solid;
}

Lý do là vì cách thức hoạt động của các giá trị trong đặc tính border-style.
Nếu đặc tính border-style có 4 giá trị:






border-style: dotted solid double dashed;
viền trên - đường chấm chấm
viền phải - đường thẳng
viền dưới - đường nhân đôi
viền trái - đường gạch đứt đoạn

Nếu đặc tính border-style có 3 giá trị:





border-style: dotted solid double;
viền trên - đường chấm chấm
viền trái và phải - đường thẳng
viền dưới - đường nhân đôi

Nếu đặc tính border-style có 2 giá trị:


border-style: dotted solid;




viền trên và dưới - đường chấm chấm
viền trái và phải - đường thẳng

Nếu đặc tính border-style có 1 giá trị:

o

border-style: dotted;
Tất cả các viền đều là đường chấm chấm

Cách chọn kiểu viền khác nhau cho đặc tính border-style như trong ví dụ trên có thể áp
dụng với cả border-width và border-color.
Đường viền - đặc tính rút gọn
Như bạn thấy trong các ví dụ trên, có rất nhiều đặc tính dùng cho đường viền. Để đơn
giản đoạn code, có thể gộp tất cả vào trong một đặc tính duy nhất. Đặc tính border là
đặc tính rút gọn cho các đặc tính sau:

border-width

border-style (bắt buộc)

border-color
p {

border: 5px solid red;
}

Ngoài ra có thể xác định các đặc tính đường viền chỉ cho một cạnh viền duy nhất như
trong các ví dụ về viền trái, viền dưới sau đây.
p {
border-left: 6px solid red;
background-color: lightgrey;
}
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

Đường viền tròn mép
Đặc tính border-radius dùng để thêm đường viền có mép tròn vào phần tử.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;

}

p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>

Đặc tính border-radius

class="normal">Viền
class="round1">Viền
class="round2">Viền
class="round3">Viền

bình thường

tròn

tròn hơn nữa

tròn nhất

</body>
</html>

Hình ảnh hiển thị các mức độ tròn của mép đường viền

Lưu ý: border-radius không hỗ trợ trên IE8 và các bản về trước.

Margin - Lề trong CSS (CSS – Margin)
Đặc tính margin trong CSS được dùng để tạo khoảng trắng xung quanh phần tử, bên
ngoài các đường viền. Các đặc tính này sẽ đặt lề cho từng cạnh của phần tử (trên,
dưới, trái, phải).
Các cạnh của lề trong CSS
CSS có các đặc tính xác định lề cho từng cạnh trong phần tử:





margin-top
margin-right
margin-bottom
margin-left

Tất cả các đặc tính lề có thể có các giá trị sau:

auto - trình duyệt tự tính toán lề

length - xác định lề theo px, pt, cm…

% - xác định lề theo % so với chiều rộng của phần tử

inherit - xác định lề kế thừa từ phần tử mẹ
Có thể dùng giá trị âm. Ví dụ dưới đây tạo lề khác nhau cho 4 cạnh của phần tử

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Đặc tính rút gọn của lề trong CSS
Để rút gọn code, có thể đưa tất cả đặc tính lề vào một đặc tính margin duy nhất, với các
đặc tính riêng:




Nếu

margin-top
margin-right
margin-bottom
margin-left
đặc tính margin có 4 giá trị

margin: 25px 50px 75px 100px;






lề trên 25px

lề phải 50px
lề dưới 75px
lề trái 100px

p {
margin: 25px 50px 75px 100px;
}

Nếu đặc tính margin có 3 giá trị
margin: 25px 50px 75px;





lề trên 25px
lề trái và phải 50px
lề dưới 75px

p {
margin: 25px 50px 75px;
}

Nếu đặc tính margin có 2 giá trị
margin: 25px 50px;




lề trên và dưới 25px

lề trái và phải 50px

p {
margin: 25px 50px;
}

Nếu đặc tính margin có 1 giá trị
margin: 25px;



tất cả các lề đều là 25px

p {
margin: 25px;
}

Giá trị mặc định
Khi đặt đặc tính margin về giá trị auto, nó sẽ tự động căn giữa phần tử theo chiều
ngang. Phần tử chiếm phần độ rộng định sẵn, còn lại sẽ được chia đều cho lề trái và
phải.

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

Giá trị inherit (kế thừa)

Ví dụ này đặt lề trái của phần từ

kế thừa từ phần tử mẹ là <div>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}

Margin Collapse

Đôi khi lề trên và lề dưới của các phần tử chồng vào nhau thành một lề duy nhất bằng
kích thước của lề lớn hơn. Việc này chỉ xảy ra với lề trên và dưới chứ không xảy ra với
lề trái và phải.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}

Ở ví dụ trên, lề dưới của