Как указать расстояние между строк в css
Перейти к содержимому

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

  • автор:

Расстояние между строками таблицы и их границами. HTML

введите сюда описание изображения

Какими средствами в html можно сделать таблицу как на картинке? Здесь расстояние не просто между строками, а между границами строк. Каждая строка как отдельный элемент со своей отдельной границей, между которыми видно основной фон.

Отслеживать
задан 22 ноя 2017 в 23:13
47 1 1 серебряный знак 10 10 бронзовых знаков

во-первых кто вам сказал, что это таблица? во-вторых если это и сделано таблицей, что мешает посмотреть код?

22 ноя 2017 в 23:15

А зачем тебе использовать таблицы? Это прошлый век. Лучше резиновой версткой (div-оми). Сделай div на него понавешай css отступы(margin) между вложенными объектами и т.д.

22 ноя 2017 в 23:53

Никто не сказал. Это графический набросок. Я вижу структурированный набор данных расположенных в обособленной группе, для меня это таблица.

23 ноя 2017 в 0:11
Спасибо за совет.
23 ноя 2017 в 0:16

Почитал про верстку div’ами. В моем случае это ничем не облегчит задачу, а наоборот. У меня табличные данные с которыми потом предстоит работать — сортировка/вставка/удаление. Таблицей все же проще.

23 ноя 2017 в 13:24

2 ответа 2

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

Удалось повторить в виде таблицы то, что изображено на картинке в вопросе. 
body < background-color: #f1f1f1; >#rootTable < margin-left: auto; margin-right: auto; height: 100px; width: 550px; border-spacing: 2px 5px; >#rootTable > tbody > tr > td < border: 1px solid darkgray; background-color: white; >#rootTable > tbody > tr > td:first-child < text-align: center; width: 10%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; >#rootTable > tbody > tr > td:last-child < width: 90%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; >#rootTable > tbody > tr:hover > td < background-color: lightgreen; >.innerTable < border-collapse: collapse; height: 100%; width: 100%; >.innerTable > tbody > tr > td < border: none; padding: 4px; >.innerTable > tbody > tr > td:first-child < width: 65%; >.innerTable > tbody > tr > td:nth-child(2) < width: 20%; >.innerTable > tbody > tr > td:last-child < width: 15%; >.person-name < font-weight: bold; >.person-info < font-style: italic; >.dates < text-align: right; >.price, .paid
  

36
Petya +1111111111 from 11.06 $100.10
A good person to 15.07 $110.00
49
Tanya +222222222 from 16.06 $20.00
A very good person to 20.07 $40.00

Отслеживать
ответ дан 23 ноя 2017 в 13:21
47 1 1 серебряный знак 10 10 бронзовых знаков

для создания таких таблиц можно делать вручную или использовать PHP с функцией SWITCH (или CASE. точно не помню)

пример использования HTML + PHP:

     Title body < width: 100%; background-color: #FFFFFF; >.parent < padding: 4px; width: 60%; height: 60px; margin: 10px 20% 0 20%; background-color: #c3ffff; border-radius: 10px; >.parent > div < display: inline-block; >.child_1 < margin-top: 10px; text-align: center; float: left; width: 10%; >.child_2   
$x
October
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
"; > ?>
13
October
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

Если не хочешь вставлять PHP — используй чистый HTML:

.parent < padding: 4px; width: 60%; height: 60px; margin: 10px 20% 0 20%; background-color: #c3ffff; border-radius: 10px; >#parent>div < display: inline-block; >.child_1 < margin-top: 10px; text-align: center; float: left; width: 10%; >.child_2
 
13
October
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
12
October
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

Примечание: код не идеальный. просто пример того, что можно сделать в твоем случае

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

Первое с чего нужно начать исследование вопроса расстояние между строк, это с того, что это такое и как это свойство применять и изменять!

Расстояние между строк определяет свойство:

Измеряется расстояние между строк: пикселями, процентами и если применялось выше к основному тексту свойство font-size, то em.(1 em равен одному цифровому значению font-size).

Теперь рассмотрим несколько примеров!

Создадим класс Primer-line-height? С высотой шрифта 17px и межстрочным расстоянием равным 1 em, а второй вариант, em увеличим в два раза!

Не забываем, совет, который есть на этой странице относительно стилей css!

p.Primer-line-height font-size: 17px;
line-height: 1em;
>

Этот текст написан с межстрочным расстоянием е равным одному em, что равно одному цифровому размеру «font-size», т.е.= 17px

p.Primer-line-height-1 font-size: 17px;
line-height: 2em;
>

Второй текст написан с межстрочным расстоянием е равным двум em, что равно двум размерам «font-size», т.е.= 2 х 17 = 34px

C общими понятиями и примерами разобрались, теперь перейдем к более интересному!

Теория – это конечно хорошо, но вот тут и начинается самое интересное! Применение теории к практике!

Я не буду вам рассказывать заново, про то, как мы,

и полностью изменили нашу изначальную страницу,

вы сможет это прочитать, начиная с самого начала.

И сейчас, собственно, читаете текст, уже на той изменённой странице.

Как уменьшить зазор между строк в Dreamweaver.

Возникла ситуация, когда нужно уменьшить расстояние между строк на нашей странице.

И тут вопрос, как собственно найти тот класс или id, который отвечает за тот стиль текста , который нам нужен, а нам нужен стиль текста, который вы читаете. В котором нам нужно изменить межстрочный интервал.

Для того, чтобы разобраться, мы возьмём в качестве примера данную страницу!

Для того, чтобы увидеть код данной страницы нажимаем ctrl + U ищем строчку 287 – это наши первые подозреваемые. Как я определил, что это именно это начало наших стилей, которые нас интересуют!?

После этой строки — №287 начинается основной текст. И он находится в дивах:

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

Следующим шагом нужно разобраться с документом css. Опять же, если вы сейчас нажмёте ещё раз ctrl + U, то строчка 33 скажет нам, где находится документ css. Нам повезло, что документ css один. Если документов несколько, то прошерстить придётся все!

Вот эта строчка нас интересует! Из неё мы видим, что документ css находится в папке номер 1969, и ищем файл style5.(можно и на этот файл посмотреть)

Далее нам нужно найти этот id – rightPan(см. выше, мы уже писалио нем!).

Открываем файл style5, нажимаем ctrl + F(поиск) и вставляем туда rightPan нажимаем найти далее.

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

Вот мы видим, что наш id – rightPan. Но выделенный стиль синим – это описание самого id, но нам нужен следующий стиль

И интересующаяя нас строчка, которая и указывает на межстрочное расстояние:

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

Ну, и далее вам остаётся, только изменить цифровое значение на то, какое вы хотите!

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

Теперь мы будем использовать бесплатную программу Notepad++. В качестве редактора кода.

Не все хотят использовать программу Dreamweaver, но нам, в любом случае требуется поиск, конечно, он есть и в простом блокноте, но я, все же, предпочитаю профессиональный инструмент, чего и вам советую!

Как мы выше писали, первое, что нам нужно найти, это где располагается основной текст, и где описано наше расстояние между строк.

Для примера, опять же рассмотрим эту страницу!

В любом браузере есть такая вещь, как — просмотр кода элемента! Используемый браузер Яндекс браузер(в опере также). Выделяем часть текста, в котором нужно изменить межстрочное расстояние. Нажимаем ПКМ, ищем строку просмотр кода элемента.

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

Далее открывается код и мы видим, что здесь 3 окна.

  1. Выделенный текст.
  2. Слева – где находится.
  3. Стиль, который прикреплён к выделенному тексту.

Для того, чтобы увидеть полную страницу, я сделал сохранил его в большом размере – смотрим.

Далее открываем документ css (мы уже во второй теме писали, как найти его) в Notepad++, нажимаем «ctrl + F» – rightPan. Нажимаем найти.

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

– это вторая выделенная запись, и далее ищем строку

И меняем цифровое значение на то, которое мы хотим!

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

А теперь самое время развлечься!

Улучши поведенческий фактор на своём сайте!

Если понравится игра, то можно забрать код для своего сайта отсюда!

  • Наши проекты:
  • Что вижу о том пишу|
  • Техника.|
  • sitemap.xml|
  • Site map |
  • Контакты

line — height

line — height задаёт интервал между строчками текста, который называют интерлиньяж.

Примеры

Скопировать ссылку «Примеры» Скопировано

 .selector  line-height: normal;> .selector  line-height: normal; >      

Множитель — расстояние будет в 3.5 раза больше, чем размер текста:

 .selector  line-height: 3.5;> .selector  line-height: 3.5; >      

Условные единицы — значение, относительно стандартного интервала.
В данном случае, интервал будет в 3 раза больше интервала родительского элемента.

 .selector  line-height: 3em;> .selector  line-height: 3em; >      

Проценты — размер интервала высчитывается относительно размера шрифта:

 .selector  line-height: 34%;> .selector  line-height: 34%; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

С помощью line — height можно выбрать, насколько большое расстояние будет между строчками текста. Обычно это расстояние немного больше, чем высота шрифта.

Браузеры понимают line — height по-своему: как высоту контейнера строки. Символы внутри образуют область контента, а участки между этой областью и границей контейнера и есть интерлиньяж. Такая особенность может легко запутать, ведь обычно расстояние между строчками измеряется по базовым линиям текста.

Иллюстрация свойства line-height

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Задать свойство line — height можно одним из нескольких значений. Самый предсказуемый вариант — с помощью числа. У свойства line — height не может быть отрицательного значения.

  • normal — значение по умолчанию. Немного отличается в разных браузерах, но, как правило, равно 1.2. Это значит, что расстояние между строчками будет равно размеру шрифта font — family , помноженному на 1.2.
  • число — число без единиц измерения. Например, значение 1.5 значит, что высота строчки будет равна размеру шрифта font — family , помноженному на 1.5.
  • длина — например, пиксели px , условные единицы шрифта em , дюймы in , пункты pt и так далее.
  • проценты — например, line — height : 120 % . За 100% берётся размера шрифта font — size .

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

Задавать высоту строки в каких-то единицах измерения не самый лучший вариант, потому что тогда высота строки не подстраивается автоматически под размер шрифта и может выглядеть не так, как ожидается.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Самый надёжный способ задать интервал между строчками — с помощью числа, например, 1.5. При увеличении масштаба страницы этот интервал увеличится соответствующим образом.

�� Для обычного текста чаще всего используют полуторный интервал line — height : 1 . 5 . С таким интервалом текст удобнее читать.

�� Ещё один способ задать интервал между строк — шорткат font . При этом обязательно сразу указать семейство шрифтов font — family . Например:

 div  font: 10px/1.2 Georgia, "Bitstream Charter", serif;> div  font: 10px/1.2 Georgia, "Bitstream Charter", serif; >      

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать одно и то же расстояние между строчками с помощью разных значений. Каждое значение будет умножаться на размер шрифта font — size :

 div  line-height: 1.2; font-size: 10px;> div  line-height: 1.2; font-size: 10px; >      
 div  line-height: 1.2em; font-size: 10px;> div  line-height: 1.2em; font-size: 10px; >      
 div  line-height: 120%; font-size: 10px;> div  line-height: 120%; font-size: 10px; >      

Другой пример показывает, почему лучше всего задавать расстояние между строчками с помощью числа.

Спойлер: простое число умножается на высоту шрифта того же элемента, а, например, значение em — на высоту шрифта родительского элемента:

   

Тут мы задали интервал с помощью числа 1.2

Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.

А здесь мы ввели 1.2em

Это значит, что 1.2 умножается на размер шрифта родительского элемента, в нашем случае
, а не на размер заголовка. Это вносит путаницу.
div class="box box_green"> h1>Тут мы задали интервал с помощью числа 1.2h1> Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо. div> div class="box box_blue"> h1>А здесь мы ввели 1.2emh1> Это значит, что 1.2 умножается на размер шрифта родительского элемента, в нашем случае div>, а не на размер заголовка. Это вносит путаницу.div> div>
 h1  font-size: 30px;> .box  width: 18em; padding: 20px; display: inline-block; vertical-align: top; font-size: 15px;> .box_green  line-height: 1.2; background-color: #49a16c;> .box_blue  line-height: 1.2em; background-color: #1a5ad7;> h1  font-size: 30px; > .box  width: 18em; padding: 20px; display: inline-block; vertical-align: top; font-size: 15px; > .box_green  line-height: 1.2; background-color: #49a16c; > .box_blue  line-height: 1.2em; background-color: #1a5ad7; >      

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если при вёрстке макета вы видите в графическом редакторе межстрочное расстояние, заданное в пикселях, то не стоит переносить его в точности. В случае, если размер шрифта элемента изменится, то абсолютно заданное межстрочное расстояние не подстроится. А хотелось бы больше гибкости.

Используй следующую функцию для расчёта относительного интерлиньяжа:

line height / font size = относительный line-height

Если размер шрифта в Фотошопе равен 58px, а межстрочное расстояние — 86px, то результат будет таким:

86 / 58 = 1.482758621

При округлении получим значение 1 . 5 .

�� Если в Фотошопе интерлиньяж не указан (пустое поле), то он равен стандартному значению — 120%. Что аналогично 1.2 для вёрстки.

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

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).

Пример 1. Интерлиньяж в тексте

HTML5 CSS 2.1 IE Cr Op Sa Fx

 html> head> meta charset="utf-8"> title>Интерлиньяжtitle> style> p.dline  line-height: 1.5; > P  line-height: 0.9em; > style> head> body> p >"dline">Некоторые сайты сохраняют техническую информацию на локальном компьютере посетителя в виде небольших текстовых файлов, которые называются сookie.p> p>Данный термин переводится как «печенье», но поскольку это название лишь сбивает с толку, его оставляют без перевода. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, а также любой информации о действиях посетителя на сайте. Подобное применение позволяет персонализировать сайт и сделать его более удобным для посетителей.p> body> html>

Результат данного примера показан на рис. 1.

Межстрочное расстояние

Рис. 1. Вид текста при разном межстрочном расстоянии

Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *