Margin và padding trong css là gì

Ngày đăng: 27/01/2024

1.Các thành phần cơ bản của 1 thẻ
2.Margin là gì
3.Padding là gì

1.Các thành phần cơ bản của 1 thẻ

Các thành phần cơ bản của một thẻ theo thứ tự từ phía trong ra ngoài là: content -> padding -> border -> outline -> margin

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Margin và padding trong css là gì ?</title>
 <style>

.parent-box {
 background-color: green;
 padding: 30px;
 margin: 100px;
 border: 5px solid yellow;
 outline: 10px solid violet;
}

.child-box {
 background-color: blue;
 color: white;
}

 </style>
 </head>
 <body>
 <div class="parent-box">
 <div class="child-box">Box con nằm phía trong box bố</div>
 </div>
 </body>
</html>

Kết quả:

thiết kế web, seo tổng thể, thiết kế app

Trong ví dụ trên ta thấy, trong cùng sẽ là content - chính là box nằm trong có text là "Box con nằm phía trong box bố". Tiếp theo phần màu xanh lá là padding có giá trị 30px, phía ngoài padding sẽ là border có màu vàng, phía ngoài border là outline có màu violet, từ outline ra ngoài chính là phần màu trắng có giá trị 100px.

Trong phần này chúng ta sẽ chỉ tìm hiểu margin và padding.

2.Margin là gì

Margin là một thuộc tính được sử dụng để kiểm soát khoảng cách giữa phần tử hiện tại với các phần tử xung quanh nó. Margin có thể nhận 1 hoặc nhiều giá trị và được thiết lập theo thứ tự trên - phải - dưới - trái (top - right - bottom - left) hoặc chỉ có 1 giá trị áp dụng cho tất cả các phía.

Cú pháp:

/* Chỉ có một giá trị: áp dụng cho tất cả các phía */
margin: 10px;

/* Hai giá trị: giá trị đầu tiên áp dụng cho top và bottom, giá trị thứ hai áp dụng cho left và right */
margin: 10px 20px;

/* Ba giá trị: giá trị đầu tiên áp dụng cho top, giá trị thứ hai áp dụng cho left và right, giá trị thứ ba áp dụng cho bottom */
margin: 10px 20px 30px;

/* Bốn giá trị: áp dụng cho top, right, bottom, left theo thứ tự */
margin: 10px 20px 30px 40px;

Ví dụ:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Margin và padding trong css là gì ?</title>
 <style>

 .test-margin {
 width: 100px;
 height: 100px;
 background-color: green;
 margin: 30px;
 }

 </style>
 </head>
 <body>
 <h3 class="test-margin">Box có sử dụng margin</h3>
 </body>
</html>

Trong ví dụ trên ta có 1 box màu xanh lá có width, height bằng 30px và có margin là 30px. Nghĩa là khoảng cách từ viền (border hoặc outline) của box màu xanh ra phía ngoài là 30px.

3.Padding là gì

Padding là một thuộc tính được sử dụng để kiểm soát khoảng cách giữa content của phần tử hiện tại với border của phần tử đó. Padding có thể nhận 1 hoặc nhiều giá trị và được thiết lập theo thứ tự trên - phải - dưới - trái (top - right - bottom - left) hoặc chỉ có 1 giá trị áp dụng cho tất cả các phía.

Cú pháp:

/* Chỉ có một giá trị: áp dụng cho tất cả các phía */
padding: 10px;

/* Hai giá trị: giá trị đầu tiên áp dụng cho top và bottom, giá trị thứ hai áp dụng cho left và right */
padding: 10px 20px;

/* Ba giá trị: giá trị đầu tiên áp dụng cho top, giá trị thứ hai áp dụng cho left và right, giá trị thứ ba áp dụng cho bottom */
padding: 10px 20px 30px;

/* Bốn giá trị: áp dụng cho top, right, bottom, left theo thứ tự */
padding: 10px 20px 30px 40px;

Ví dụ:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Margin và padding trong css là gì ?</title>
 <style>

 .test-padding {
 width: 100px;
 height: 100px;
 background-color: green;
 padding: 30px;
 }

 </style>
 </head>
 <body>
 <h3 class="test-padding">Content của box</h3>
 </body>
</html>

Trong ví dụ trên ta có 1 box màu xanh lá có width, height bằng 30px và có padding là 30px. Nghĩa là khoảng cách từ content phía trong box tới viền (tới border) của box là 30px.

Liên hệ ngay tại đây với chúng tôi để được tư vấn nhanh nhất hoặc liên hệ:

Hotline: 0705.550.553

Email: bqsoftvn@gmail.com

Fanpage: https://www.facebook.com/bqsoftvn

Hân hạnh được hợp tác!

Bài viết

Margin và padding trong css là gì

1.Các thành phần cơ bản của 1 thẻ

2.Margin là gì

3.Padding là gì

Liên hệ ngay tại đây với chúng tôi để được tư vấn nhanh nhất hoặc liên hệ:

Bài viết mới nhất

Liên lạc

Link

Fanpage