Tìm hiểu về thuộc tính Margin và Padding

(Traidatmui.com) - Để có thể cân đối các vị trí của các thành phần trong blog hay web thì thuộc tính margin và padding đóng vai trò không nhỏ. Nếu bạn đã quen với việc thiết kế, quen với các mã css thì chắc hẳn bạn đã rỏ thuộc tính này. Tuy nhiên, nếu bạn mới làm quen thì nó là một vấn đề không nhỏ.
Hôm nay mình sẽ giới thiệu về 2 thuộc tính này để giúp bạn hiểu rỏ hơn và áp dụng trong việc chỉnh sửa bố cục cho blog hay web của mình.
Margin và Padding là 2 thuộc tính giúp chúng ta có thể dễ dàng kiểm soát khoảng cách giữa cách khối hay các thành phần của trang. Margin và Padding đều có 4 giá trị tương ứng với 4 phía của trang (ở trên (top), bên trái (left), bên phải (right) và ở dưới (bottom) của trang). Bạn có thể xem ảnh bên dưới

Hình ảnh minh họa

I. Thuộc tính Margin

Margin là một thuộc tính giúp bạn canh lề cho một khối, hay một thành phần nào đó của trang. Margin có 4 giá trị trên, phải, dưới, trái.

- Khi có đủ 4 giá trị (margin: 3px 5px 10px 6px;): Khi trong margin có 4 giá trị như trên thì bạn đã canh lề trên (3px), lề phải (5px), bên dưới (10px), lề trái (6px).

- Khi có 3 giá trị (margin: 3px 4px 8px;): Như vậy là bạn đã canh cho lề các giá trị lề trên (3px), bên phải và trái là (4px) và ở dưới là (8px).

- Khi có 2 giá trị (margin:10px 20px;): Như vậy các lề trên và dưới nhận giá trị (10px), lề trái và phải có giá trị (20px).

- Khi chỉ có 1 giá trị (margin: 25px;): Trường hợp này thì các lề trên, phải, dưới, trái đều nhận một giá trị bằng nhau là 25px.

Ngoài ra, bạn cũng có thể định giá trị cho các lề như bên dưới

margin-left:10px; //lề trái
margin-right:20px; //lề phải
margin-top:15px; //ở trên
margin-bottom:5px; //bên dưới.

II. Thuộc tính Padding

Margin là thuộc tính canh lề cho một khối hay một thành phần của trang thì Padding sẽ canh khoảng cách giữa nội dung trong một khối hay một thành phần nào đó của trang. Khoảng cách này là khoảng cách từ biên đến nội dung bên trong khối hay thành phần của trang.

Giống như thuộc tính margin, padding cũng có 4 giá trị tương ứng với 4 lề trong khối hay thành phần của trang. Và đặc tính của nó cũng giống như margin; nó canh trên, phải, dưới, trái tương ứng với 4 giá trị (ví dụ: padding: 12px 16px 10px 3px;), nó sẽ định các giá trị tương ứng là trên (12px), phải (16px), dưới (10px), trái (3px), trường hợp chỉ có 1, 2 hay 3 giá trị cũng tuơng tự margin. Và bạn cũng có thể xác định giá trị của từng lề như margin.

padding-left:10px; //lề trái
padding-right:20px; //lề phải
padding-top:15px; //ở trên
padding-bottom:5px; //bên dưới.

Ở trên mình đã giới thiệu đến bạn 2 thuộc tính cơ bản trong việc tạo khoảng cách giữa các khối hay các thành phần trong blog hay web. Nó chỉ là cơ bản nhưng đóng vai trò rất quan trọng trong việc tạo sự cân đối cho các thành phần của trang.