26 tháng 9, 2019

Thuộc tính Margin và Padding trong CSS

Cũng giống như việc soạn thảo văn bản thì việc trình bày nội dung của phần tử html cũng cần được căn chỉnh khoảng cách cho rõ ràng. CSS có 2 thuộc tính để chỉ định khoảng cách đó là marginpadding
Nhìn vào hình trên các bạn sẽ thấy padding là khoảng cách từ phần nội dung đến cạnh trong của đường viền (border), còn margin là khoảng cách từ cạnh ngoài của đường viền đến đường biên giới hạn phần tử html.

1. Thuộc tính margin trong CSS

- Margin dùng để chỉ định khoảng cách từ cạnh ngoài của đường viền border đến đường biên giới hạn phần tử html
- Có 4 thuộc tính cơ bản cho marginmargin-topmargin-rightmargin-bottom; margin-left;  tương ứng với các hướng trên; phải; dưới; trái.
Ví dụ: margin-top: 10px; hoặc margin-right: 10%;
- Thuộc tính margin: auto; dùng để chỉ định phần tử html sẽ được căn giữa ở trong phần tử html cha

Cách viết shorthand cho thuộc tính margin

- Cú pháp 1: margin: value; chỉ định khoảng cách cho cả 4 hướng
- Cú pháp 2: margin: value1 value2; value1 chỉ định cho khoảng cách trên và dưới, value2 chỉ định cho trái và phải.
- Cú pháp 3: margin: value1 value2 value3 value4; chỉ định khoảng cách lần lượt theo các hướng là trên, phải, dưới, trái.

(*) Lưu ý: Trong một số trường hợp, khi có 2 phần từ html liền kề nhau (trên và dưới) thì CSS sẽ không cộng khoảng cách vào mà sẽ lấy giá trị lớn nhất để áp dụng. Điều này không áp dụng với hướng trái và phải.
- Ví dụ 1
h1 {margin: 20px 0 0 0;}
h2 {margin: 0 0 30px 0;}


Trong ví dụ này nhiều bạn sẽ nghĩ khoảng cách giữa h1h2 sẽ là 20 + 30 = 50px nhưng hệ thống sẽ chỉ lấy giá trị 30px để áp dụng. 
- Ví dụ 2
#div1 {margin: 20px 0 0 0;}
h1 {margin: 30px 0 0 0;}


Trong ví dụ này thì margin-top của thẻ div1 sẽ là 30px, còn thẻ h1 sẽ nằm sát vào đường giới hạn bên trên của thẻ div1. Nghĩa là margin-top của h1 sẽ bằng 0.

2. Thuộc tính padding trong CSS

- Thuộc tính padding dùng để chỉ định khoảng cách từ phần nội dung đến cạnh cạnh trong của đường viền border.
- Có 4 thuộc tính cơ bản cho paddingpadding-top; padding-right; padding-bottom; padding-left;  tương ứng với các hướng trên; phải; dưới; trái.
Ví dụ: padding-top: 10px; hoặc padding-right: 10%;

Cách viết shorthand cho thuộc tính padding

- Cú pháp 1: padding: value; chỉ định khoảng cách cho cả 4 hướng
- Cú pháp 2: padding: value1 value2; value1 chỉ định cho khoảng cách trên và dưới, value2 chỉ định cho trái và phải.
- Cú pháp 3: padding: value1 value2 value3 value4; chỉ định khoảng cách lần lượt theo các hướng là trên, phải, dưới, trái.


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!