Khoảng cách giữa hai phần tử nội tuyến <span>

Question

Tôi đã tạo hai phần tử với nhau trong html và tạo mỗi khối nội tuyến. Tôi thấy rằng luôn luôn có một khoảng cách giữa hai yếu tố này, nhưng thực sự tôi đã không đặt bất kỳ padding/margin attibutes cho họ. Ai đó có thể cho tôi biết tại sao và làm cách nào tôi có thể khắc phục khoảng cách này?

Answer 1

CSS:

span { 
    display: inline-block; 
} 

HTML:

<span>This will have</span> 
<span>a gap between the elements</span> 

<span>This won't have</span><span>a gap between the elements</span> 

Answer 2

Đây là một hành vi kỳ lạ, có thể khắc phục được, đã thay đổi đánh dấu của bạn thành nội dung như thế này.

<div class="inline"> 
    first 
</div><div class="inline"> 
    second 
</div> 

Không đặt bất kỳ khoảng trắng nào khi xác định phần tử nội tuyến khác.

Answer 3

khi bạn sử dụng inline-blocks, để loại bỏ các lề chỉ áp dụng word-spacing: -3px; và letter-spacing: -3px; để container mẹ và sau đó trở lại những quy tắc trên inline- các phần tử khối có word-spacing: normal; và letter-spacing: normal;

ví dụ: với đánh dấu cơ bản này

<div> 
    <span>...</span> 
    <span>...</span> 
    <span>...</span> 
</div> 

mã CSS tối thiểu là

div { 
    word-spacing: -3px; 
    letter-spacing: -3px; 
} 

span { 
    word-spacing: normal; 
    letter-spacing: normal; 
    display: inline-block; 
} 

Một khả năng khác (mà tôi không khuyên bạn nhưng nó có thể hữu ích cho bạn để biết, dù sao) là để thiết lập font-size: 0; cho phụ huynh thùng đựng hàng.

Answer 4

Bạn có thể xóa khoảng trắng và giữ định dạng mã đẹp bằng cách sử dụng nhận xét HTML.

<span>1</span><!-- 
--><span>2</span><!-- 
--><span>3</span>