Tìm hiểu về margin, padding và cách sử dụng chúng trong css

by Unknown 10:59:00 AM 0 nhận xét

Với một người thiết kế web thông thạo css thì 2 thuộc tính  margin và padding có vẻ không có gì mơ hồ, nhưng đối với một người mới tiếp cận với css thì việc phân biệt cũng như sử dụng 2 thuộc tính này hay bị nhầm lẫn. Sau đây là một bài viết ngắn giúp các bạn phân biệt 2 thuộc tính này, sử dụng chúng thành thạo hơn trong làm web.

1. Margin
Nghĩa là lề, căn lề, trong css nó dùng để điều chỉnh khoản cách giữa các thành phần của trang web:

Sử dụng:
Thuộc tính Margin có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng theo các cách sau:

Cách 1: margin 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: margin: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: margin: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: margin: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 8px;
margin-left: 15px;

2. Padding
Thuộc tính padding tuy có cách dùng tương tự thuộc tính margin nhưng lại có ý nghĩa khác, nó dùng để phân cách giữa nội dung và viền (border) của một thành phần.

Sử dụng:
Thuộc tính Padding cũng có 4 giá trị lần lượt là Top, Right, Bottom, Left và sử dụng ương tự padding:

Cách 1: padding 5px 5px 0 5px;

Nghĩa là top:5px, right:5px, bottom:0px, left:5px;

Cách 2: padding: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;

Cách 3: padding: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 3: padding: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;

Cách 3: Đưa ra từng vị trí cụ thể:

Ví dụ:
padding-top: 10px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 15px;

Lưu ý: Khi sử dụng thuộc tính padding thì độ lớn của một thành phần sẻ bao gồm cả padding, còn nếu sử dụng margin thì độ lớn của thành phần không đổi, giá trị của margin chỉ là khoản cách bên ngoài thành phần.

Còn bây giờ nếu các bạn đã hiểu thì bắt tay vào thực hiện một file html sử dụng padding và margin xem nhé.

Chúc các bạn thực hiện tốt!