Tìm hiểu cách căn lề cho phần tử khối trong CSS – Blog Lê Thạch

Posted on by adminChuyên mục:Kiến thức Internet
Chào những bạn, thời điểm ngày hôm nay tất cả chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của lethach.com. Lần trước mình có viết một bài hướng dẫn những bạn cách căn lề cho một thành phần bằng thuộc tính margin, còn trong bài viết này mình sẽ chỉ thêm cho những bạn những cách căn lề cho thành phần khối bằng những thuộc tính mà tất cả chúng ta đã học trong những bài viết trước .

Căn lề cho phần tử khối (Block element)

Một thành phần khối sẽ có chiều rộng chiếm hàng loạt chiều rộng của thành phần 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à những thẻ tạo thành phần khối :

Ở bài này, mình 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 phong cách thiết kế Layout .

Căn giữa sử dụng thuộc tính margin

Một thành phần khối ( Block element ) hoàn toàn 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ụ :






    


    
Thẻ div này được thiết lập chiều rộng 60%, margin-left:auto, margin-right:auto.

Lưu ý : 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 thành phần khối là sử dụng thuộc tính position : absolute ;Ví dụ :

div {
    position: absolute;
    right: 0px;
    width: 350px;
    border: 1px solid black;
    padding: 10px;
}

Kết quả :

Lưu ý : 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ử . Đ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ụ :











  
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 thành phần khối là sử dụng thuộc tính floatVí dụ :

div{
    float: right;
    width: 350px;
    border: 1px solid black;
    padding: 10px;
}

Kết quả :

Lưu ý : 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ử . Đ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ụ :









  
Khi sử dụng thuộc tính float 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 Float để rõ hơn.

Lời Kết

Bài viết tới đây là kết thúc rồi, cảm ơn những bạn đã theo dõi bài viết. Nếu có bất kể vướng mắc hay câu hỏi nào hãy phản hồi dưới bài viết, mình sẽ trợ giúp những bạn giải đáp vướng mắc .

admin