Các giá trị của margin:
– auto: tự động canh đều 2 bên left và right, thường được sử dụng để canh giữa màn hình cho toàn bộ trang web.
– Kích thước (pixels, pt, em . . .)
– % kích thước của thành phần chứa nó.
Ví dụ: bên dưới sẽ khai báo margin (top, right, left, bottom) cho thành phần <p> có class=”first”
– Trong file: bai1html.html ta có:
1
2
3
4
5
|
<body>
<p> Đoạn văn bản này cách phía trên 10px, bên trái 15px, bên phải 10px; phía dưới 15px, không có padding</p>
</body>
|
– Trong file: style.css ta gõ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
p.first{
border: 1px solid pink;
width: 400px;
height: auto;
margin–top:10px;
margin–right:10px;
margin–bottom:15px;
margin–left:15px;
}
|
-
Kết quả:
Padding: Padding là phần nằm giữa phần hiển thị nội dung và đường viền (border). Khi một thành phần được khai báo padding thì sẽ tạo ra một khoảng trống với dường viền giúp nội dung dễ nhìn hơn.
Các giá trị của padding
– Kích thước (pixels, pt, em . . .)
– % kích thước của thành phần chứa nó.
Ví dụ sau khai báo padding cho thành phần <p> có class=”two”
– Trong file: bai1html.html ta có:
1
2
3
4
5
|
<body>
<p> Đoạn văn bản này cách phía trên 10px, bên trái 15px, bên phải 10px; phía dưới 15px, không có padding</p>
</body>
|
– Trong file: style.css ta gõ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
p.two{
border: 1px solid pink;
width: 400px;
height: auto;
padding–top:2px;
padding–right: 3px;
padding–bottom:4px;
padding–left:5px
}
|
Kết quả:
Chúc các bạn thành công!