Bài 09: Thuộc tính margin - padding và Box Model trong CSS

Chúng ta đã được học khá nhiều kiến thức về CSS nhưng bấy nhiêu là chưa đủ để bạn xây dựng một layout hoàn chỉnh. Ví dụ bạn muốn hai thẻ HTML cách xa nhau một khoảng nào đó thì kiến thức ở những bài trước không thể làm được. Vậy nên trong bài này bạn sẽ được tìm hiểu hai thuộc tính margin, padding để giải quết vấn đề đó và cuối cùng là mô hình Box Model trong CSS.

1. Thuộc tính margin và padding trong CSS

Hai thuộc tính này dùng để canh lề so với nội dung của thẻ HTML.

Margin

Dùng để tạo khoảng cách giữa hai thẻ HTML, xem hình dưới đây:

margin

Chúng ta có 5 cách sử dụng như sau:

  • margin-left: 20px : khoảng cách lề trái 20px 
  • margin-top:20px : khoảng cách lề trên 20px
  • margin-right: 20px : khoảng cách lề phải 20px
  • margin-bottom: 20px : khoảng cách lề dưới 20px
  • margin : 20px : tất cả lề trên, lề dưới, lề trái, lề phải đều có khoảng cách 20px 

Ví dụ: XEM DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div{
                color: white;
                background: blue;
                border: solid 1px;
            }
            #div2{
                margin-top: 200px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            NỘI DUNG CỦA DIV1
        </div>
        
        <div id="div2">
            NỘI DUNG CỦA DIV2
        </div>
    </body>
</html>

Chạy lên giao diện sẽ như hình dưới đây:

Lưu ý: Khi sử dụng thuộc tính margin thì sẽ không ảnh hưởng tới chiều rộng của đối tượng HTML, nghĩa là nếu bạn thiết lập chiều rộng width:100pxmargin:20px thì lúc chiều rộng của đói tượng so  với lề là 100px + 20px = 120px. Nghĩa lả chiều rộng width:100px sẽ không thay đổi.

Padding

Dùng để tạo khoảng giữa thẻ HTML và nội dung của nó, xem hình dưới đây:

Chúng ta cũng có 5 cách dùng tương tự như margin:

  • padding-left: 20px : khoảng cách lề trái so với nội dung bên trong 20px 
  • padding-top:20px : khoảng cách lề trên so với nội dung bên trong 20px
  • padding-right: 20px : khoảng cách lề so với nội dung bên trong phải 20px
  • padding-bottom: 20px : khoảng cách so với nội dung bên trong lề dưới 20px
  • padding : 20px : tất cả lề trên, lề dưới, lề trái, lề phải so với nội dung bên trong đều có khoảng cách 20px 

Ví dụ: XEM DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div{
                color: white;
                background: blue;
                border: solid 1px;
                padding: 50px;
            }
        </style>
    </head>
    <body>
        <div>
            NỘI DUNG CỦA DIV
        </div>
    </body>
</html>

Chạy lên giao diện sẽ như hình dưới đây:

Lưu ý: Khi sử dụng thuộc tính padding thì chiều rộng của của thẻ sẽ cộng thêm khoảng cách của padding. Ví dụ ta có margin-left: 20px, padding-left: 20pxwidth: 100px thì hình mô phỏng của nó sẽ là:

2. Mô hình Box Model trong CSS

Kết hợp ba thuộc tính margin, paddingborder sẽ cho ta một mô hình với tên gọi là Box Model, Box Model thể hiện được sơ đồ các thuộc tính xác định vị trí của đối tượng HTML. Các bạn nhìn hình dưới đây (hình này mình lấy từ W3C).

Trong mô hình này thì:

  • Đường xọc ngoài cùng là đường biên 
  • Tiếp theo khoảng cách giữa đường biên so với đường border (màu xanh) ta gọi là margin.
  • Tiếp khoảng cách giữa border so với nội dung bên trong ta gọi là padding.

Đây chính là mô hình Model Box mà bạn cần nắm để có thể chỉnh sửa vị trí hiển thị của đối tượng HTML.

3. Lời kết

Vậy là mình đã giới thiệu sơ lược cách sử dụng hai thuộc tính marginpadding trong CSS, đồng thời bạn cũng đã hiểu được sơ đồ Model Box trong CSS và việc áp dụng nó vào thực tế như thế nào sẽ phụ thuộc vào bản thân của bạn.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.