CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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:

Bài viết này được đăng tại [free tuts .net]

  • 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:

margin1 png

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.

margin 3 png

Padding

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

padding png

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:

padding1 png

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à:

padding 5 png

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

box model gif

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.

Cùng chuyên mục:

Tạo Trang web E-commerce  từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Top