18/08/2018, 11:03
Cách căn lề cho phần tử khối trong CSS
Căn lề cho phần tử khối (Block element) Một phần tử khối sẽ có chiều rộng chiếm toàn bộ chiều rộng của phần tử chứa nó, và sẽ có ngắt xuống dòng ở cả trước và sau của khối. Ví dụ, dưới đây là các thẻ tạo phần tử khối: <div> <p> <h1> - <h6> .... Ở bài ...
Căn lề cho phần tử khối (Block element)
Một phần tử khối sẽ có chiều rộng chiếm toàn bộ chiều rộng của phần tử chứa nó, và sẽ có ngắt xuống dòng ở cả trước và sau của khối.
Ví dụ, dưới đây là các thẻ tạo phần tử khối:
- <div>
- <p>
- <h1> - <h6>
- ....
Ở bài này, tôi sẽ hướng dẫn bạn làm thế nào để căn lề cho một khối, việc này rất có ích trong việc thiết kế Layout.
 |
Để căn lề cho cho văn bản trong khối thì bạn vui lòng xem lại bài CSS Text
|
Căn giữa sử dụng thuộc tính margin
Một phần tử khối (Block element) có thể được căn giữa bằng cách thiết lập thuộc tính margin-left và margin-right là auto.
Ví dụ
div{
margin-left: auto;
margin-right: auto;
}
Xem ví dụ
|
|
Bạn sẽ không nhìn thấy rõ một phần tử khối được căn giữa nếu chiều rộng của nó là 100%
|
Căn trái và căn phải sử dụng thuộc tính position
Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính position: absolute;
Ví dụ
div {
position: absolute;
right: 0px;
awidth: 350px;
border: 1px solid black;
padding: 10px;
}
Xem ví dụ
|
|
Khi căn lề cho phần tử khối bằng thuộc tính position, bạn cần phải xác định margin và padding của thẻ phần tử <body>. Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau.
|
Ví dụ
body{
margin:0px;
padding:0px;
}
div.container{
position: relative;
awidth: 100%;
}
div.right{
position: absolute;
right: 0px;
awidth: 350px;
border: 1px solid black;
padding: 10px;
}
Xem ví dụ
|
|
Khi sử dụng thuộc tính position:absolute nó sẽ làm thay đổi dòng chảy bình thường của các phần tử khác, bạn có thể ôn lại bài CSS Position để rõ hơn.
|
Căn trái và căn phải sử dụng thuộc tính float
Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính float
Ví dụ
div{
float: right;
awidth: 350px;
border: 1px solid black;
padding: 10px;
}
Xem ví dụ
|
|
Khi căn lề cho phần tử khối bằng thuộc tính float, bạn cần phải xác định margin và padding của thẻ phần tử <body>. Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau.
|
Ví dụ
body {
margin: 0;
padding: 0;
}
.right {
position: absolute;
right: 0px;
awidth: 300px;
background-color: #b0e0e6;
}
Xem ví dụ
|
|
Đối với việc căn lề bằng thuộc tính position và float, bạn cần phải thêm <!DOCTYPE html> vào đầu tập tin, để đảm bảo các trình duyệt đều hiển thị như nhau.
|
