Sử dụng Padding và Margin trong thiết kế website

Tác giả: Nguyễn Duy Nhân    1 Comment

CSS đem đến cho chúng ta những giao diện gọn nhẹ hơn cách thiết kế website bằng table truyền thống. Trong bài viết này chúng ta sẽ cùng nghiên cứu về 2 thuộc tính được sử dụng khá nhiều trong thiết kế website dựa trên CSS: padding và margin.

Tìm hiểu về thẻ Margin

Margin được dùng để kiểm soát các khoảng trống giữa các thành phần trong trang web, chúng ta còn gọi chúng là lề. Theo đó chúng ta có các loại lề: lề trái, lề phải, lề trên, lề dưới.

Hình dưới đây mô tả chi tiết các vị trí được đề cập đến ở trên và tên gọi đúng của chúng:

Các vị trí margin

Cách sử dụng chúng trong trong file CSS:

#thanhphan{
	margin-left:1px;
	margin-right:1px;
	margin-top:1px;
	margin-bottom:1px;
}

Thông thường, các pro design không sử dụng cách define từng thành phần như thế này mà gộp chung theo cách sau:

Một thành phần:

#thanhphan{
	margin:1px;
}

Đoạn CSS này cho phép định dạng các thuộc tính của margin (bao gồm top, left, right, bottom) có giá trị 1px.

Hai thành phần:

#thanhphan{
	margin:15px 10px;
}

Đoạn CSS này xác định margin-top và margin-bottom là 15px; margin-left và margin-right là 10px.

Ba thành phần:

#thanhphan{
	margin:15px 10px 5px;
}

Đoạn CSS này xác định:

• Margin-top = 15px
• Margin-right = 10px
• Margin-bottom = 5px
• Margin-left = 10px

Bốn thành phần:

#thanhphan{
	margin:15px 10px 20px 5px;
}

• Margin-top = 15px
• Margin-right = 10px
• Margin-bottom = 20px
• Margin-left = 5px

Ngoài ra , thuộc tính margin còn cho phép bạn định khoảng cách lề một cách tự động:

body{
	margin:auto;
}

Đoạn CSS trên được sử dụng để đưa nội dung vào giữa khung màn hình và tự động lấy lề theo kích thước hiển thị của màn hình. Đoạn CSS này bạn sẽ dễ dàng tìm thấy ở những website có kích thước nhỏ hơn kích thước màn hình của bạn.

Tìm hiểu về thẻ Padding

Tương tự như Margin đã nói ở trên, Padding cũng giúp xác định khoảng cách. Nhưng nó dùng xác định khoảng cách từ đường viền của phần tử đến nội dung chứa trong nó. Hình sau sẽ mô tả rõ hơn về tác dụng của Padding:

Padding và các thành phần của nó

Về cách sử dụng, Padding sử dụng giống như Margin:

Một thành phần:

#thanhphan{
	padding:1px;
}

Đoạn CSS này cho phép định dạng các thuộc tính của padding(bao gồm top, left, right, bottom) có giá trị 1px.

Hai thành phần:

#thanhphan{
	padding:15px 10px;
}

Đoạn CSS này xác định padding-top và padding-bottom là 15px; padding-left và padding-right là 10px.

Ba thành phần:

#thanhphan{
	padding:15px 10px 5px;
}

Đoạn CSS này xác định:

• padding-top = 15px
• padding-right = 10px
• padding-bottom = 5px
• padding-left = 10px

Bốn thành phần:

#thanhphan{
	padding:15px 10px 20px 5px;
}

• padding-top = 15px
• padding-right = 10px
• padding-bottom = 20px
• padding-left = 5px

Bài có liên quan

• CSS PopUp – Hiện POPUP đẹp hơn, dễ dàng hơn…
• Thay đổi định dạng input file
• 10 cách viết CSS tốt cho bạn mới học