HTML & CSS Lập trình web

Định dạng CSS – Phần 8: Margin, pading and div

This entry is part 13 of 24 in the series HTML & CSS cho người bắt đầu

Margin, Padding là 1 thuộc tính khá là phổ biến trong CSS, nó cho phép chúng ta chỉ định khoảng cách từ phần từ HTML ra đường viền, hoặc khoảng cách từ  của phần tử. Trong bài viết này mình sẽ hướng dẫn các bạn từng bước tiếp cận với Margin, Padding , trong quá trình trong việc thiết kế bố cục cho website, bạn sẽ thường xuyên làm việc với nó, vì nếu bạn nắm vững thuộc tính này thì sẽ rất có ích cho các bạn.

Định dạng CSS – Phần 8: Margin, pading and div


1/ Div:

Div (viết tắt của division) là một thẻ trong HTML, nó giúp ta gom nhóm tập hợp các phần tử trên website vào một khu vực. Khi thiết kế website, chia bố cục website, ta phải sử dụng div thường xuyên.

Lưu ý: Trong HTML5 thẻ div không hỗ trợ thuộc tính align.

Ví dụ về div:

2/ Margin:

Margin là khoảng cách từ thẻ HTML này đến thẻ HTML khác, đơn vị sử dụng thường là px, pt, %,…

Cú pháp của margin:

STT Tên thuộc tính Ý nghĩa
1 margin 50px; margin-top= margin-bottom= margin-left= margin-right = 50px;
2 margin 50px 30px; margin-top = margin-bottom = 50px; margin-left = margin-right = 30px;
3 margin 50px 40px 30px; margin-top = 50px; margin-bottom = 30px; margin-left = margin-right = 30px;
4 margin 50px 40px 30px 20px; margin-top =50px; margin-right= 40px; margin-bottom= 30px; margin-left= 20px;

Một số giá trị của Margin:

STT Tên thuộc tính Ý nghĩa
1 margin 50px 40px 30px 20px; Canh lề cho 4 hướng của phần tử
2 margin-top: 30px; Canh lề bên trên phần tử
3 margin-bottom: 30px; Canh lề bên dưới phần tử
4 margin-left: 30px; Canh lề bên trái phần tử
margin-right: 30px; Canh lề bên phải phần tử
Code mẫu:

3/ Padding:

Các giá trị trong padding cũng như margin, nhưng ý nghĩa của nó lại khác nhau, margin là khoảng cách của 2 thẻ HTML, còn thuộc tính padding là giữa thẻ HTML với nội dung bên trong thẻ đó.

Code mẫu:

Qua bài viết này, các bạn cần nắm rõ 1 số giá trị thuộc tính của Margin, Padding, các bạn nên tự code lại và quan sát màn hình kết quả để hiểu rõ bản chất và không bị nhầm lẫn giữa Margin Padding. Hẹn gặp lại các bạn vào bài viết sau, chúc các bạn học tốt!

Series Navigation<< Định dạng CSS – Phần 7: Position GroupĐịnh dạng CSS – Phần 9: Float Group >>