Khoảng trắng giữa các phần tử inline hoặc inline-block
TIL
633
HTML
28
CSS
40
Male avatar

Ngô Tiến Thái viết ngày 12/08/2016

Vấn đề với float

Thông thường để chia giao diện thành từng cột mình thường dùng float nhưng nó có nhược điểm là các cột không thể luôn căn giữa theo chiều ngang so với phần tử bao ngài hoặc căn giữa theo chiều dọc so với nhau.

Khắc phục với display:inline-block

Mình dùng display:inline-block để làm được việc trên.

    <div class="wrap">
        <div class="col-1"> column 1</div><div class="col-2"> column 2 </div>
    </div>
    .wrap {
        overflow: hidden;/**/
        text-align: center;/*căn giữa .col-1, .col-2*/
    }
    .col-1,.col-2 {
        width: 50%;
        /*float: left;*/ /*-> dung float thì chỉ có thể căn trái hoặc phải */

        display: inline-block;
        vertical-align: middle; /* căn giữa các cột theo chiều dọc */

    }

    .col-1 {
        background: red;
        height: 100px;
    }
    .col-2 {
        background: blue;
        height: 200px;
    }

demo

Khoảng trắng không mong muốn

Tới đây một số bạn có thể thắc mắc tại sao mình viết html cho ví dụ trên khó nhìn thế kia.

Nếu mình giữ nguyên css rồi sửa lại đoạn html kia thành:


    <div class="wrap">
        <div class="col-1"> column 1</div>  <!-- có khoảng trắng ở đây--><div class="col-2"> column 2 </div>

    </div>

hoặc


    <div class="wrap">
        <div class="col-1"> column 1</div> <!-- có xuống dòng ở đây-->
        <div class="col-2"> column 2 </div>
    </div>

demo

thì .col-1.col-2 sẽ lập tức bị rớt xuống và không còn nằm trên cùng một dòng nữa.
Một chút thay đổi tuy nhỏ nhưng đôi khi có thể gây rắc rối lớn.

Nguyên nhân do đâu?

Đó là do các phần tử inlineinline-block mặc định hiển thị khoảng trắng (nếu có) giữa chúng với độ rộng là 4px và khoảng trống này tới từ word-spacing mặc định của trình duyệt.

Mặc định thì trình duyệt có word-spacing là 0px ở trạng thái này không phải các từ sẽ hiển thị sát nhau hoàn toàn mà giữa chúng vẫn có khoảng cách là 4px tức là khi ta cho word-spacing: 1px thì khoảng cách thực sự phải là 5px và word-spacing: -4px thì các từ sẽ sát nhau hoàn toàn.

demo

Với các phần tử block thì word-spacing chỉ ảnh hưởng tới khoảng cách của các từ trong đoạn text chứa trong nó nhưng với các phần tử inlineinline-block thì nó còn ảnh hưởng tới cả khoảng cách giữa các phần tử với nhau.

Trong ví dụ trên sở dĩ .col-1.col-2 không nằm trên cùng một hàng là do giữa chúng có thêm khoảng trống 4px. Các bạn có thể thấy rõ điều này khi mình cho width nhỏ lại. demo

Loại bỏ phần thừa này bằng cách nào?

Sửa trong code html

Cách này mình đã làm ở ví dụ trên chỉ cần loại bỏ khoảng trắng giữa phần tử inline-block trong code html, nếu muốn code đẹp hơn có thể viết như sau:

    <div class="col-1"> column 1</div><!--
    thích xuống bao nhiêu hàng cũng ok
  --><div class="col-2"> column 2 </div>

Dùng css

Nguyên nhân là do word-spacing nhưng khi font-size là 0px thì text sẽ biến mất hoàn toàn vì thế word-spacing sẽ không còn ý nghĩa. Do đó nếu dùng css chỉ cần cho phần tử bao ngoài có word-spacing: -4px hoặc font-size: 0px sau đó đặt lại font-size hoặc word-spacing cho các phần tử con.

    .wrap {
        word-spacing: -4px;
        /*hoặc*/
        /*font-size: 0px;*/
    }
    .col-1, .col-2 {
        word-spacing: 0px;
        /*hoặc*/
        /*font-size: 14px;*/
    }

demo

Đây là bài viết đầu tiên của mình nên sẽ có nhiều sai sót mong rằng sẽ nhận được nhiều ý kiến đóng góp từ mọi người để mình hoàn thiện hơn cho những bài sau.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

Ngô Tiến Thái

1 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết gần 3 năm trước
18 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!