Thuộc tính margin
Định nghĩa và sử dụng Thuộc tính margin canh lề cho thành phần. Cấu trúc tag { margin: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả margin đơn vị auto inherit Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, […]
Định nghĩa và sử dụng
Thuộc tính margin canh lề cho thành phần.
Cấu trúc
tag {
margin: giá trị;
}
Với thuộc tính và giá trị như sau:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| margin | đơn vị auto inherit |
Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, … |
| margin-top | đơn vị auto inherit |
Canh lề bên trên cho thành phần, đơn vị có thể là px, em, %, … |
| margin-right | đơn vị auto inherit |
Canh lề bên phải cho thành phần, đơn vị có thể là px, em, %, … |
| margin-bottom | đơn vị auto inherit |
Canh lề bên dưới cho thành phần, đơn vị có thể là px, em, %, … |
| margin-left | đơn vị auto inherit |
Canh lề bên trái cho thành phần, đơn vị có thể là px, em, %, … |
Cách sử dụng thuộc tính margin:
| Thuộc tính | Thành phần | Thể hiện | Mô tả |
|---|---|---|---|
| margin | 4 thành phần | top right bottom left (5px 10px 3px 20px) |
margin-top: 5px; margin-right: 10px; margin-bottom: 3px; margin-left: 20px; |
| 3 thành phần | top (right left) bottom (5px 10px15px) |
margin-top: 5px; margin-right: 10px; margin-left: 10px; margin-bottom: 15px; |
|
| 2 thành phần | (top bottom) (right left) (5px 10px) |
margin-top: 5px; margin-bottom: 5px; margin-right: 10px; margin-left: 10px; |
|
| 1 thành phần | (top right bottom left) (10px) |
margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; |
Ví dụ
Html viết:
<html> <head></head> <body> <div> <p>HỌC HTML - CSS</p> </div> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC HTML – CSS
CSS viết:
div {
border: 1px solid red;
}
div p {
background: #66CC00;
margin: 10px 0 0;
}
Dòng margin ở trên tương đương với các giá trị sau:
margin-top: 10px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
Hiển thị trình duyệt:
HỌC HTML – CSS
Trình duyệt hỗ trợ
- Internet Explorer
- Firefox
- Opera
- Google Chrome
- Safari
