Незначительное пустое пространство между встроенными элементами?

Я знаю, что при использовании встроенных блоков вы получаете нежелательное пустое пространство.Незначительное пустое пространство между встроенными элементами?

Но почему в этом примере эти два встроенных элемента связи получили небольшое пространство между ними?

Вы можете видеть, что они находятся на двух строках, и если я ставил их бок о бок и удалял пробел в текстовом редакторе, пространство затем исчезало, но, конечно, оно должно игнорировать пространство в текстовом редакторе?

<body> 
    <a href="#">link 1</a> 
    <a href="#">Link 2</a> 
</body>

Это пространство между ссылками.

<body> 
    <a href="#">link 1</a><a href="#">Link 2</a> 
</body>

Это не так.

Спасибо.

https://jsfiddle.net/hfgjwj55/

источник

2016-10-20 Joe Consterdine

ли это произойдет только в jsfiddle? или также в вашем собственном проекте. jsfiddles помещает код в iframe, что может вызвать некоторые странные проблемы. –

Привет, Роббин, это не происходит и на моем местном. –

Это происходит потому, что если поместить любое количество пробелов в HTML код будет преобразован в один пробел.

<body> 
     <a href="#">link 1</a> 
     <a href="#">Link 2</a> 
    </body

Новая линия будет добавить один пробел между двумя элементами. поэтому либо его одно пространство, либо несколько его будет считаться одним пробелом между двумя элементами.

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>`

как выше случае будет иметь одно пространство между ним. в то время как ниже код не будет иметь никакого пространства между ними

<body> 
    <a href="#">link 1</a><a href="#">Link 2</a> 
</body

, если вы хотите несколько пробелов использовать   следующим образом:

<body> 
    <a href="#">link 1</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Link 2</a> 
</body

источник

2016-10-20 09:41:56

Это было проблемой для меня много раз, а также.

Я обычно всегда решить, как это: https://jsfiddle.net/g7h0fbyn/

<a href="#">link 1</a><!-- 
--><a href="#">Link 2</a>

Там уже вопрос к этому на StackOverflow, с действительно хороший ответ, вы должны проверить это: How to remove the space between inline-block elements?

источник

2016-10-20 09:43:03 jogoe

Это для встроенных элементов блока, я имел в виду встроенные элементы. –

Это относится как к встроенным, так и к встроенным блочным элементам. – jogoe

Браузер Безразлично видеть разницу в том, какие пробелы нужны, а какие нет; все пробелы сворачиваются в один пробельный символ (если не указано иное pre и тому подобное).

Помимо удаления пробелов в исходном коде, одно из возможных (хотя и довольно сложное) решение заключается в глобальном наборе font-size в глобальном масштабе и сбросе его для определенных элементов.

Другой способ закомментировать пробелы, как это:

<a href="#">link 1</a> 
<a href="#">Link 2</a>

Хотя это может быть немного неаккуратно.

Есть способы избежать этой проблемы в целом, например, используя Flexbox, но это, вероятно, слишком велико для вашего примера.

источник

2016-10-20 09:44:43 Andii

Когда вы дадите новую строку между двумя элементами, между ними будет добавлено одно пространство, как показано ниже.

<body> 
    <a href="#">link 1</a> 
    <a href="#">Link 2</a> 
</body>

выше и ниже такие же,

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>

Если вы не дали каких-либо пустое пространство или новую строку, то не будет никакого пространства между элементами.

<body> 
    <a href="#">link 1</a><a href="#">Link 2</a> 
</body>

Даже если вы предоставили два пространства между элементами, как показано ниже, оно будет отображаться только с одним пространством.

<body> 
    <a href="#">link 1</a> <a href="#">Link 2</a> 
</body>

Так что, если вам нужно больше, чем одно пространство, вы должны использовать  , как показано ниже.

<body> 
    <a href="#">link 1</a>&nbsp;&nbsp;<a href="#">Link 2</a> 
</body>

источник

2016-10-20 09:45:14

Cheers. Мне нравятся ваши объяснения. –

@JoeConsterdine Cool :-) –

-1

Вы можете добавить корректировку поля, чтобы удалить пробел.

a{ 
margin-left:-4px; 
}

источник

2016-10-20 09:46:32

Вы действительно не должны форматировать его так. – jogoe

Это не будет надежно работать для разных шрифтов и размеров шрифтов. – Andii

Там же различные варианты, чтобы избежать бело-пространство отображается в вашем примере вы можете:

отображения а-теги, как встроенный блок и плавать их влево https://jsfiddle.net/hfgjwj55/3/
```
a { 
    display: inline-block; 
    float: left; 
} 
```
установить размер шрифта на обертку (в данном случае на тело) 0 и размер шрифта для тегов a, например 16px https://jsfiddle.net/hfgjwj55/2/
```
body { 
    font-size: 0; 
} 

a { 
    font-size: 16px; 
} 
```
положить HTML комментарии между элементами

источник

2016-10-20 10:33:29

Незначительное пустое пространство между встроенными элементами?

ответ

Смежные вопросы