Пробел между span html

как удалить пробел между двумя тегами span?

В приведенном выше коде у меня есть два элемента тега span: elite и admin. Я хочу убрать пространство между ними. Я попытался установить отрицательное значение для свойства padding второго элемента span, но оно не работает. Как я могу это исправить?

4 ответа

Просто удалите пробел между тегами html

 .side-bar < background-color: red; >@media (min-width: 768px) < .side-bar< z-index:10; position:absalute; width:220px; /*padding-top:60px;*/ height:100%; /*top:0;*/ position:fixed; >> @media (min-width: 768px) < .top-left-part< width:220px; position:fixed; z-index: 11; /*top: 0;*/ height: 60px; >> /*---------------top left part starts here------------*/ .top-left-part < width:220px; float:left; background-color: #ffffff; /*padding-top: 60px;*/ >.top-left-image < float: left; height: 40px; width: 50px; padding-left: 1.3px; padding-right: 10px; padding-top: 2.7px; >.left-top-text < display: inline-block; padding-top:6px; font-size: 30px; white-space: nowrap; /* word-spacing: -1px; /* float: right;*/ /*margin-left: 10px;*/ >.text-elite < font-weight: 600; >.text-admin < padding-left: -5px; >/*---------------top left part ends here-------------*/ /*---------------top-right part starts here----------*/ .top-right-part < top: 0 !important; background-color:#4F5467; width:100%; height:60px; right: 0; >.arrow-left < color: white; >/*---------------top right part ends here-------------*/

            
 
  elite admin 
 
  

Просто передайте font-size: 0; в .top-left-part и попробуйте .

Фактически по умолчанию display inline-block создает один невидимый узел между элементами, поэтому нам нужно удалить этот узел, передавая font-size: 0 родительскому элементу. И вы должны указать размер шрифта для своих дочерних элементов.

Хорди Флорес прав. Встроенные (и встроенные-блочные) элементы отображаются как текстовые символы, что означает, что пробел или новая строка в коде HTML приведет к появлению пробела в отображаемом выводе. Вам просто нужно удалить символы форматирования в коде, чтобы исправить это.

Если вы хотите, чтобы ваш код был организован, вы можете использовать комментарии HTML. Например:

 
My span 1My span 2My span 3My span 4 
 

Измените свой CSS вот так — это должно сработать.

Элементы являются встроенными, это означает, что их ширина зависит от содержимого. Отступы и поля не применяются. Чтобы «включить» поддержку полей и отступов, вы должны изменить диапазон, чтобы он отображался как встроенный блочный элемент. (с display: inline-block; ). После этого вы можете применить отрицательную маржу, например. 4 пикселя, чтобы уменьшить разрыв между элементами.

Источник

Пробелы между тегами и не отображаются

Я хочу напечатать «| Testing» , но вместо этого напечатаю эту печать «| Testing» . Что происходит со всеми этими spaces . Разве этот код не может печатать что между этими тегами ? Я делаю что-то неправильно?

@caramba расскажите, пожалуйста, как это влияет на код. Я имею в виду, разве этот код не должен печатать то, что находится между этими тегами ?

5 ответов

Из спецификации HTML4 о символах пробела (акцент мой):

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

Поэтому спецификация диктует, что несколько последовательных пробелов должны быть свернуты в один.

Существует несколько вариантов «сохранения» последовательных пространств:

Поскольку браузеры используют другой шрифт для содержимого элементов pre , вам также необходимо использовать CSS для сброса шрифта к шрифту, используемому на остальной части вашей страницы, например

*: Вы также можете использовать   HTML, однако это изменение приведет к другому поведению браузера: когда содержимое слишком длинное, чтобы вписаться в доступную ширину элемента, браузер автоматически разбивает содержимое на пробелы. nbsp означает * no-break_space *, поэтому, в то время как браузер будет отображать пробелы, он не будет разбивать на них переполненный контент (demo).

Источник

Как убрать отступ между двух тегов span?

и мне нужно что бы между тегами span не появлялся отступ. Я уже пытался использовать padding:0; но ни к чему это не привело. Как убрать этот отступ?

Как убрать отступ между блоками div?
Подскажите пожалуйста как убрать отступ между блоками на сайте.

Как убрать отступ между блоком и таблицей
Написала код, почти все верно. За исключением того, что появился большой пробел между "тетрисом" и.

Как убрать отступ в теге form между границей формы и полем input
Возникла проблема на простом по идее месте. Создал форму для оставления месседжа и контактов. .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

span { padding:0; margin:0; } .DesktopContainer__score { font-weight: 500; font-family: TT Commons,BlinkMacSystemFont,Roboto,Open Sans,Helvetica Neue,sans-serif; color: #2c2d2e; font-size: 44px; line-height: 51px; margin-bottom: 20px; } .DesktopContainer__score span { width: 23px; text-align: center; display: inline-block; } .DesktopContainer__coin { display: inline-block; background-image: url(тут url картинка); width: 35px; height: 35px; background-size: cover; background-repeat: no-repeat; background-position: 50%; margin-left: 9px; vertical-align: -4px; position:relative; }

Добавлено через 4 минуты
novichek_1905 конечно заработало, но картинка с размером символа (.DesktopContainer__coin) теперь не много выше чем надо

Источник

Как добавить отступы в элемент span, имеющий несколько строк

У меня есть элемент span, который выделяется с помощью background-color: yellow и padding: 1px 10px .

Однако на небольших устройствах эта строка текста становится двумя строками, тремя строками и т. Д. Это приводит к тому, что первая и вторая строки «теряют» отступы на правой стороне, например слова «the «and» to «, а также вторая и третья строки, чтобы» потерять «отступы на левой стороне, такие как слова» highlight «и» better «на рисунке ниже:

Как я могу убедиться, что эти слова (на картинке выше «the», «highlight», «to», «better») и все остальные слова поддерживают отступ в 10px слева и с правой стороны?

Кто-то в ответ на аналогичный вопрос предложил использовать display: block , но это делает интервал больше не span , а просто прямоугольником, и это не так, как мне нужно, чтобы он выглядел. Это также делает подсветку простирающейся на всю ширину страницы.

4 ответа

Вы можете попытаться подделать фон, когда диапазон нарушен, используя box-shadow . Попробуйте что-то вроде этого и посмотрите, работает ли это для вас:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisi ipsum. Mauris convallis dapibus diam ac sollicitudin. Vivamus varius nulla magna, ac rutrum nulla accumsan quis. Duis placerat, elit non posuere elementum, tellus massa pellentesque nunc, eu maximus ligula metus non dui. Sed accumsan quam nec sodales sagittis.

Просто оберните его в контейнерный элемент div и поместите горизонтальный отступ в этот элемент, так как это то, что вы действительно хотите:

https: // jsfiddle.net/xg1bkgmn/
 
Span это встроенный элемент, имеет смысл использовать его для вашего случая выделения только текста и расширения строк. Тем не менее, для того, чтобы вся вещь была заполнена, ей нужен контейнер блочных элементов, это стандартная практика.
 
Зачем идти с более сложным CSS, если решение так просто?
 
 
-1 
 
bryan60 10 Сен 2017 в 22:48 
 
 
 
Используйте CSS для оформления коробки.
 
span
 
Это применяет стили к каждому фрагменту блока в вашем диапазоне.
 
Чтобы включить как можно больше браузеров, вы можете ретранслировать по позиции: относительный и использовать 2 встроенных тега, инкриминированных для имитации желаемого результата.
 
Имейте в виду, что некоторые поля или отступы должны быть внимательны, чтобы сохранить входящий элемент в переводе через позицию.
 
Пример, чтобы показать идею
 
p span < background:yellow; /* increase line height for better reading : optionnal*/ line-height:1.35em; padding: 0.25em 0; >span span < /* move child 1em to left to fake padding */ position:relative; left:1em;/* value of your left alike padding*/ >/* eventually on the last line ? */ span span:after
 
 
 This sentence has some padding to make the highlight appear thicker. These are more words to better explain.  
 
Это не самый лучший, лишний HTML для стилей . промежутки нейтральны 🙁
 
Источник
 
HTML тег
 
Чтобы не задавать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для идентификации тега использовать атрибуты class или id с именем селектора.
 
Тег не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.
 
Синтаксис
 
Тег - парный, его содержимое пишется между открывающим () и закрывающим () тегами.
 
Пример
 
html> html> html> head> title>Заголовок документа title> head> body> p>У моей кошки span style="color: green;">зеленые span> глаза. p> body> html>
 
Результат
 
 
В этом примере мы задали стиль непосредственно в теге.
 
Пример
 
html> html> head> title>Заголовок документа title> style> .letter < color: red; font-size: 300%; /* Размер шрифта в процентах */ position: relative; /* Относительное позиционирование */ top: 7px; /* Сдвиг сверху */  style> head> body> p>span class="letter">О span>на нанесла в руках отвратительные, тревожные желтые цветы. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто. p> p>Михаил Булгаков p> body> html>
 
Результат
 
 
В этом примере мы добавили к тегу атрибут class , и отдельно задали стили для содержимого тега.
 
Атрибуты
 
Как добавить стиль к тегу ?
 
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
 
 
CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
 
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
 
CSS свойство font-size задает размер щрифта.
 
CSS свойство font-weight устанавливает насыщенность шрифта.
 
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
 
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
 
 
Цвет текста внутри тега :
 
Стили форматирования текста для тега :
 
 
CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
 
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
 
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
 
CSS свойство word-break указывает перенос строки.
 
 
Другие свойства для тега :
 
 
CSS свойство text-shadow добавляет тень к тексту.
 
CSS свойство text-align-last выравнивает последнюю строку текста.
 
CSS свойство line-height устанавливает межстрочный интервал.
 
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
 
CSS свойство word-spacing устанавливает расстояние между словами в тексте.
 
 
Источник