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 ...

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 awidth:100px và margin: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 awidth: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: 20px và awidth: 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, padding và border 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 margin và padding 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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

[BÀI 8]Thuộc tính padding và margin trong css

Thuộc tính padding và margin trong CSS Padding và margin là 2 thuộc tính trong css giúp căn chỉnh các thành phần của website vào vị trí mà mình mong muốn. 1. Margin Dùng để tạo khoảng cách với các thành phần bên ngoài thẻ HTML. Các giá trị có thể là px, em, %….. Margin-top : ...

Trịnh Tiến Mạnh viết 3 tuần trước

Box Model trong CSS

Mọi phần tử HTML đều có thể được coi là boxes (hộp). Trong CSS, thuật ngữ “box model” được sử dụng khi nói về thiết kế và bố cục. CSS box model hiểu nôm na là hộp bao quanh mỗi phần tử HTML. Nó bao gồm margin, đường viền, padding và nội dung phần tử. ...

Trịnh Tiến Mạnh viết 14:41 ngày 07/09/2018

Thuộc tính margin & padding trong CSS

Thuộc tính display trong CSS Thuộc tính float trong CSS Thuộc tính Position:relative & absolute Hướng dẫn làm menu dọc hai cấp với CSS Tìm hiểu thuộc tính margin – padding và Box Model trong CSS , ba thuộc tính này giúp căn chỉnh khoảng cách giữa các phần tử. Bạn muốn xây dựng ...

Trần Trung Dũng viết 17:28 ngày 04/09/2018

Các thuộc tính định dạng DANH SÁCH (LIST) trong CSS

Cấu trúc của danh sách Có hai kiểu danh sách là: danh sách có thứ tự (dùng thẻ <ol>) và danh sách không có thứ tự (dùng thẻ <ul>) Các thẻ: <ol>, <ul>, <li> đều thuộc dạng PHẦN TỬ KHỐI. Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ cấu trúc phạm vi của các phần tử ...

Hoàng Hải Đăng viết 11:01 ngày 18/08/2018

Mô hình hộp (Box Model) trong CSS

Mô hình hộp (Box model) Một phần tử HTML được coi là một Box. Mô hình hộp (Box model) có nghĩa là một phần tử HTML sẽ bao gồm các thành phần: margin, border, padding, và content (nội dung của phần tử). Mô hình hộp (Box model) cho phép chúng ta thêm bo viền xung quanh phần tử , và xác định ...

Hoàng Hải Đăng viết 10:54 ngày 18/08/2018
0