Học HTML, CSS từ Zero Tới Hero
- Vị trí trong Box Model
- Cú pháp sử dụng
- Tính chất
- Trường hợp sử dụng
Tài nguyên sử dụng trong bài học:
Vị trí trong Box Model
Margin là khoảng cách giữa phần tử hiện tại với các phần tử xung quanh nó. Trong Box Model, margin nằm ở vị trí thứ 4 tính từ trong ra ngoài và cũng là vị trí ngoài cùng của Box Model.
Cú pháp sử dụng
Cú pháp:
.btn {
margin: 20px;
}
Thuộc tính margin là cú pháp shorthand của 4 thuộc tính riêng lẻ:
margin-top: khoảng không gian phía trên phần tửmargin-right: khoảng không gian bên phải phần tửmargin-bottom: khoảng không gian bên dưới phần tửmargin-left: khoảng không gian bên trái phần tử
Với cú pháp shorthand, thuộc tính margin có thể có từ 1 tới 4 giá trị cùng lúc:
| Mô tả | Giá trị |
|---|---|
margin: 10px; |
Phần tử có 4 hướng đều cách 10px. |
margin: 10px 20px; |
Trên/dưới phần tử có margin 10px, trái/phải có margin 20px. |
margin: 10px 20px 30px; |
Bên trên phần tử có margin 10px, trái/phải margin 20px, bên dưới margin 30px. |
margin: 10px 20px 30px 40px; |
Margin các hướng lần lượt: trên-phải-dưới-trái. |
Tính chất
Trong Box Model, margin là phần trong suốt nên không thể nhìn thấy như border hay padding.
Khác với thuộc tính border và padding, margin là khoảng không gian bên ngoài phần tử, vì vậy sẽ không tham gia làm tăng kích thước phần tử.
Dễ dàng thấy, class .box1 có kích thước gốc 120x120, có sử dụng thuộc tính margin: 40px tuy nhiên hover vào phần tử kích thước thực vẫn là 120x120.
Trường hợp sử dụng
Thuộc tính margin được dùng để tạo khoảng cách giữa phần tử hiện tại với các phần tử khác.
Nếu không có thuộc tính margin, các phần tử sẽ bị dính vào nhau và chưa đảm bảo thẩm mỹ như Box1 và Box2 dưới đây:
<style>
.box1 {
width: 120px;
height: 120px;
padding: 20px;
background-color: blueviolet;
border: 10px solid pink;
}
.box2 {
width: 120px;
height: 120px;
padding: 20px;
background-color: blueviolet;
border: 10px solid brown;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
Vậy làm sao để Box 1 không dính sát vào Box 2 nhỉ? Rất đơn giản, bạn chỉ cần thêm margin cho Box 1 hoặc Box 2:
<style>
.box1 {
width: 120px;
height: 120px;
padding: 20px;
margin-bottom: 20px;
background-color: blueviolet;
border: 10px solid pink;
}
.box2 {
width: 120px;
height: 120px;
padding: 20px;
background-color: blueviolet;
border: 10px solid brown;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
Nắm chắc tác dụng của thuộc tính margin dùng để tạo khoảng cách giữa phần tử hiện tại với các phần tử xung quanh, bạn hoàn toàn có thể kiểm soát tốt khoảng cách giữa các phần tử trên trang web của bạn.
Sử dụng giá trị auto
Ngoài các giá trị được chỉ định rõ như 10px, 20px, v.v, thuộc tính margin còn có giá trị là auto.
<style>
div{
width: 160px;
margin: auto;
color: red;
font-size: 14px;
}
</style>
<h2>Thời tiết hôm nay</h2>
<p>Hôm nay là một ngày đẹp trời, không khí trong lành, mát mẻ. Cây xanh thì thào, đung đưa theo gió</p>
<div>Nội dung được căn giữa</div>
Thời tiết hôm nay
Hôm nay là một ngày đẹp trời, không khí trong lành, mát mẻ. Cây xanh thì thào, đung đưa theo gió
Thẻ <div> là thẻ con của thẻ <body>. Khi set margin: auto cho thẻ div, phần tử sẽ được căn giữa so với chiều rộng của thẻ cha chứa nó, tức thẻ <body>.
Lúc này, thẻ <div> sẽ chiếm 160px chiều rộng đã được định sẵn. Trình duyệt sẽ tính toán chiều rộng của thẻ <body> và trừ đi chiều rộng của thẻ <div>, sau đó chia đều hai bên để được khoảng margin trái và margin phải.
Margin trái/phải = (chiều rộng trình duyệt - chiều rộng phần tử) / 2.
Lưu ý:
- Giá trị
autochỉ áp dụng cho những thẻ có thuộc tínhdisplay: block. - Chỉ dùng
autođể căn giữa được cho chiều ngang, không căn được cho chiều dọc.
Tóm tắt
- Margin là khoảng cách giữa phần tử hiện tại với các phần tử xung quanh.
- Trong Box Model, margin nằm ở vị trí thứ 4 tính từ trong ra ngoài (nằm ngoài cùng).
- Thuộc tính
marginlà cú pháp viết tắt của:margin-top,margin-bottom,margin-left,margin-right. - Có thể sử dụng từ 1 tới 4 giá trị cùng lúc cho thuộc tính
margin. - Margin là thành phần trong suốt, không thể nhìn thấy và không làm tăng kích thước phần tử.
- Sử dụng thuộc tính
marginkhi muốn tạo khoảng cách giữa phần tử hiện tại với các phần tử xung quanh.
Nhận xét