Как сократить расстояние между строками в html

Как уменьшить расстояние между span?

— обнулить font-size для p и вернуть для span
— задать флекс для p
— есть вариант с отрицательным margin, но он ненадежный, потому что отступ зависит от комбинации размера шрифта элемента и родителя.
— объяснить как запятая попала в отдельный span и почему между словами не должно быть пробелов

Решения вопроса 2

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

span

б) переопределяют контекст
Ответ написан более года назад
Комментировать
Нравится 2 Комментировать

Danny Arty @DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!

А почему у вас запятая в отдельном span-е?

Как уменьшить расстояние между обьектами?

Есть вот такие объекты, и между ними надо уменьшить расстояние между ними, но я уже подзабыл как. Подскажите? Вот проблема, слишком большое расстояние, из-за чего они вылезают за рамки. Вот их CSS:

#foto < width: 100vw; position: relative; left: -150px; display: flex; justify-content: space-around; flex-wrap: wrap; right: 100px; >.file < display: block; width: 250px; height: 200px; position: relative; margin: 60px 100px 50px 130px; >.file_img img

Отслеживать
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
задан 24 июн 2019 в 18:35
51 1 1 серебряный знак 6 6 бронзовых знаков
ихний — это чеяшний?
24 июн 2019 в 19:52
Попробуй через margin сделать.
25 июн 2019 в 9:03

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Если я верно поняла вашу разметку, то причина в следующем: из-за того, что ширина контейнера #foto , в котором вы размещаете фотографии, задана динамически ( width: 100vw — то есть, во всю ширину окна), а размеры фотографий и отступы между ними заданы жёстко в пикселях ( margin: 60px 100px 50px 130px; у элемента с классом .file и width: 200px у .file и .file_img ) — в какой-то момент ширина контейнера с чёрной рамкой (как и ширина окна) становится меньше, чем сумма ширин фотографий и расстояний между ними.

В вашем случае (как правильно заметили в комментарии) можно задать свойство margin для контейнеров с фото .file в процентах, чтобы оно не было жёстким, а регулировалось в зависимости от ширины блока. Или попробовать вовсе убрать это свойство, поскольку у контейнера с фотографиями вы прописали flex-свойство justify-content: space-around , что уже означает, что фотографии будут распределены так, чтобы свободное место располагалось поровну вокруг них. Если вы хотите сделать так, чтобы крайние картинки «прижимались» к краям блока #foto , а остальные располагались между ними с равными расстояниями — попробуйте justify-content: space-between .

P.S.: если вы прикрепите html-разметку этого фрагмента, то можно будет с большей точностью выяснить, что пошло не так, и дать более действенный совет:)

Уменьшить расстояние между элементами списка li

Господа нужна помощь как уменьшить расстояние между элементами списка. Пробовал margin и padding ничего не помогает только мой код полностью отодвигается в сторону которую я впишу. ![Текст] (https://sun6-13.userapi.com/z70ALOrTiv5_uqPf2EbgzVEZWxBwJawkaflGGw/PAmTplN6dOs.jpg)

footer < margin-top: 30px; background-color: #F7680B; padding: 10px; margin-left: 20px; >footer li < height: auto; display: inline-block; width: 100px; justify-content: space-around; font-size: 20px; padding-right: 70px; list-style: none; margin-left: -25px; >.ftr < text-decoration: none; color: white; font-family: Fantasy; >#spn

Отслеживать
Eryk Tibijczyk
задан 29 июл 2020 в 17:06
Eryk Tibijczyk Eryk Tibijczyk
55 1 1 серебряный знак 4 4 бронзовых знака
Добавил, там как я писал нужно только уменьшить расстояние между элементами списка.
29 июл 2020 в 17:12
Вы же сами задали padding-right в 70px , уменьшите его..
29 июл 2020 в 17:15

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

добавите вот это правило footer li:not(:first-of-type)<> и меняйте расстояние так, как вам нужно. я поставил -55px .

footer < margin-top: 30px; background-color: #F7680B; padding: 10px; margin-left: 20px; >footer li < height: auto; display: inline-block; width: 100px; justify-content: space-around; font-size: 20px; padding-right: 70px; list-style: none; margin-left: -25px; >footer li:not(:first-of-type) < margin-left: -55px; >.ftr < text-decoration: none; color: white; font-family: Fantasy; >#spn

Отслеживать
ответ дан 29 июл 2020 в 17:19
881 4 4 серебряных знака 12 12 бронзовых знаков

Спасибо огромное, помогло, я просто начинающий и не знал что есть такая функция :not(:first-of-type) теперь буду знать еще раз спасибо огромное поставил вам плюс за помощь)

29 июл 2020 в 17:28

@Eryk Tibijczyk, всегда рад помочь :)) p.s. если пропишите вот так — footer li:first-of-type<> , без :not , то затроните только первый элемент в списке, но не все остальные. Успехов вам в начинаниях!

29 июл 2020 в 17:33

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Расстояние между строк

Помогите,пожалуйста,разобраться с расстоянием м\у строк. Вроде,поставил
p.dline line-height: 1;
для обычного текста всё работает,но для одного куска текста получается большой разрыв. Не могу нормально в интернете найти ответ,как для этого куска изменить расстояние.
P.S не судите строго,первый день этим занимаюсь. В универе даже лекций нету по этому(((
Разбирайся сам,как говорится.

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Расстояние между строк
Открыт в Дельфине html Мне нужно чтобы текст, в данном случае MS Word немного ушел назад. Ну.

Увеличенное расстояние между строк меню
Здравствуйте! Я тут новенькая и очень надеюсь на помощь умных людей. Есть сайт.

Не могу закрепить текстовый слой к странице и уменьшить расстояние между строк
Народ хелп! Работаю в dreamweaver. Сделал второй слой с текстом, который в программе.

Расстояние между кнопками
можно ли стандартными средствами css и html, сделать так чтоб расстояние "а" между кнопками.

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
hirigakuresaizo, потому-что строчки ниже заключены в тэг

, который по умолчанию имеет собственный междустрочный интервал.

Регистрация: 14.11.2014
Сообщений: 30
а как этот интервал изменить внутри тэга

?

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
Можно попробовать reset — ом сбросить, а можно схитрить задав свойство p . А может просто тег

заменить на тэг . Выбирайте, что по душе.

Регистрация: 14.11.2014
Сообщений: 30

если заменить на span, то у меня не работает отступ слева. А «p«. трудно понять,как правильно в это вместить отступ слева.
Помучаю вас немного,если вы не против)))))

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
Так например: p . line-height:0.2em; — межстрочный интервал, margin:0; — убираем внешний отступ между тегами

1 2 3 4 5 6 7 8 9

h6>Стиль программирования/h6> p>Следование тра-ля-ля/p> ul> li>Лесенка. /li> li>Выделение скелета /li> li>Упирание коленок в стену/li> li>Короткие строки/li> . /ul>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

html> head> title>Стиль программирования/title> /head> body> h2 style="color:green" > Стиль программирования/h2> span>Следование приведенным ниже правилам, доставляет мне большое удовольствие.Мои Коды легко читаются, отлаживаются и редактируются в обычном текстовом редакторе./span> ul> li>Лесенка/li> li>Лесенка/li> li>Лесенка/li> li>Лесенка/li> li>Лесенка/li> /ul> /body> /html>