Попытка тесно сложить строки в HTML

Это должно быть просто, но я не понимаю. Я пытаюсь сложить три строки (одну мелким шрифтом, одну большую, одну маленькую) друг против друга с одинарным интервалом. Вместо этого над строкой большого шрифта всегда есть двойной пробел (для 48-pt над ней есть 48-pt строка).

Я играл с полями, отступами, высотой, границами; Я удалил все, кроме самого необходимого, и я все еще не могу заставить верхнюю и среднюю линии красиво лежать друг против друга.

Код:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 1<p></div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 2</p></div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 3</p></font>


</html>

html spacing
person Joe Marfice    schedule 15.09.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте удалить теги p, они не нужны в разметке:

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 1</div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 2</div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  Line 3</div>

JS Fiddle: http://jsfiddle.net/TSLA7/

Если вам абсолютно необходимы теги p, просто удалите их отступы и поля:

p{
    padding: 0px;
    margin: 0px;
}
person Kevin Bowersox    schedule 15.09.2013
comment
ХЛОПНУТЬ! Ты получил это! Я не понимал, что тег div создает свои собственные строки, как это делает тег p. Спасибо! - person Joe Marfice; 16.09.2013

arrow_upward
0
arrow_downward

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

p { 
    line-height:0.7;
    margin:0
}

http://jsfiddle.net/C4mFX/

person 3066d0    schedule 15.09.2013
comment
Нет, разница не в использовании высоты строки; это в применении его к p. Попробуйте применить line-height к div, и вы увидите, что разница практически отсутствует. - person Joe Marfice; 16.09.2013
comment
это высота строки ... Я просто изменил p на div, и он работает точно так же. Вы должны использовать высоту строки, потому что это динамическое значение. Если вы установите все значения конечными, как в вашем коде, вы столкнетесь с проблемами при масштабировании сайта, особенно с px. jsfiddle.net/C4mFX - person 3066d0; 16.09.2013

arrow_upward
0
arrow_downward

Давайте держать вещи действительно просто здесь. То, что вы ищете, это line-height и margin.

http://jsfiddle.net/TSLA7/1/

Итак, удалим и немного упростим html.

<div class='stacked_lines'>
    <div>
        <p>Line 1</p>
    </div>

    <div style="font-size:48px;">
        <p>Line 2</p>
    </div>

    <div>
        <p>Line 3</p>
    </div>
</div>

И в некоторых CSS:

.stacked_lines div {
    line-height:1;
    font-size:16px;
}

.stacked_lines p {
    margin:0; 
}

Итак, теперь нам не нужно указывать высоту для div — они в 1 раз больше размера шрифта (т. е. такие же, как размер шрифта!)

Мы уменьшили поля для p элементов, что означает, что они складываются по мере необходимости.

person Rich Bradshaw    schedule 15.09.2013
comment
Это не очень хорошее решение, потому что p имеет поля, определенные для остальных 99% экземпляров, в которых он используется. - person Joe Marfice; 16.09.2013
comment
Я предполагаю, что вы будете использовать класс/идентификатор, чтобы сузить селекторы, а не делать это точно так, как указано здесь. В приведенном вами примере 100% ps были в divs :) - person Rich Bradshaw; 16.09.2013