Inline-Block không có lề?

Question

Tôi có một số DIV được hiển thị dưới dạng các khối nội tuyến; và dường như họ đang nhận được khoảng cách tự động được áp dụng ở giữa chúng từ trình duyệt. Họ có margin/padding thiết lập là 0. Có cách nào để sửa lỗi này mà không sử dụng lề trái?

Answer 1

Sam, không gian bạn đang xem thực sự là khoảng trắng. Đó là lý do tại sao loại bỏ các miếng đệm và lề không làm gì cả. Hãy để tôi giải thích. Khi bạn có điều này:

HTML

<div> 
    a 
    a 
    a 
    a 
</div> 

đây là cách nó hiển thị:

a a a a 

... phải không?

Vì vậy, nếu bạn có điều này:

<div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
    <div style="display:inline-block"></div> 
</div> 

... bạn sẽ nhận được điều tương tự:

block [space] block [space] block 

Bây giờ ... có rất nhiều giải pháp khác nhau cho vấn đề này. Tôi tin rằng điều phổ biến nhất là nhận xét ra khoảng trống trong html:

<div> 
     <div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div><!-- 
     --><div style="display:inline-block"></div> 
    </div> 

Tôi không thích điều đó - tôi thích giữ html càng sạch càng tốt. Cách ưa thích của tôi là đặt kích thước phông chữ của cha thành 0 và sau đó đặt lại kích thước phông chữ mong muốn trên chính các khối nội tuyến.Cũng giống như vậy:

div { 
    font-size: 0; /* removes the whitespace */ 
} 

div div { 
    display: inline-block; 
    font-size: 14px; 
} 

Answer 2

Bạn không cần sử dụng lề âm để bù đắp các lề ban đầu.

Thay vào đó bạn có thể ghi đè lên chúng với những điều sau đây:

* { margin:0; }

hay:

.div { margin:0; }

nếu đó là yếu tố cụ thể.

EDIT:

Có vẻ các vấn đề có thể là một kết quả của khoảng trắng ngoài ý muốn. Ví dụ:

<div style="display:inline-block"> 
    ... 
</div> 
<div style="display:inline-block"> 
    ... 
</div> 

Có khoảng trắng giữa hai ngăn và trình duyệt sẽ in kết quả trắng. Để khắc phục điều này, bạn sẽ cần phải thay đổi thành:

<div style="display:inline-block"> 
    ... 
</div><div style="display:inline-block"> 
    ... 
</div> 

Tận hưởng và may mắn!

Answer 3

Inline-block là ban đầu là một IE6 Hack

Đây là những gì nó được sử dụng để:

• Để khắc phục IE6 lỗi double-margin trên các yếu tố nổi
• Để đặt nhiều phần tử giống như khối trên cùng một đường ngang mà không thả nổi chúng (nếu bạn không thể nổi 'trường hợp đặc biệt)
• Để cho phép một elemen nội tuyến t có chiều rộng và/hoặc chiều cao trong khi vẫn còn lại inline
• Để cho phép một phần tử nội tuyến có đệm hoặc lề

Vì vậy, nếu bạn muốn có nhiều divs bên cạnh eachother xin vui lòng sử dụng phao, gonna của nó giải quyết nhiều vấn đề css của bạn mà inline-block có thể gây ra, trình duyệt đặc biệt là vấn đề chéo

Thông tin thêm về inline-block here arcticle 9.2.4

Trân trọng SP

xin vui lòng góp ý, nếu không đồng ý

Answer 4

Một cách khác tôi đã tìm thấy phương pháp làm thay đổi word-khoảng cách trên thùng cha mẹ làm việc cho tôi https://jsfiddle.net/1ex5gpo3/2/

.parent { 
    word-spacing: -1em; 
} 

.child { 
    word-spacing: normal; 
    display: inline-block; 
} 

Answer 5

Bạn có thể sử dụng cả hai display: inline-block và float: left để loại bỏ không gian đó.

Ở đây diễn ra plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview