Есть ли бесшовная новая строка?

Question

Когда я использую <br/>, между двумя строками есть пробел. Я хочу, чтобы между двумя линиями не было вертикального пространства. Строка выше - это изображение, а строка ниже - текст. Я хочу устранить пробел между обеими строками.

<img src="../common/logo.jpg" /><br/>
<span class="style2">A Comprehensive Online Workplace</span>

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

Я хочу добавить слоган к логотипу и создать новый компактный логотип.

Answer 1

Изображения по умолчанию являются встроенными элементами, которые находятся на базовой линии. Это эффективно заставляет изображение действовать как буква, такая как a, b, c, d или e. Внизу есть место для спусков (которые вы найдете по таким буквам, как g, y и q).

Вы можете настроить это:

img { vertical-align: bottom; }

Answer 2

Посмотрите на свойство line-height css. line-height: 1em возможно то, что вам нужно.

Answer 3

Сделайте интервал блок-элементом, чтобы он располагался под изображением. Мол,

.style2 {
   display: block;
}

Но если вы хотите, чтобы текст был обернут вокруг изображения, вы перемещаете изображение влево или вправо. Как,

img {
    float: left;
}

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

Answer 4

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

Это зависит от шрифта, и вы мало что можете с этим поделать. Лучшее, что вы можете сделать, это установить свойство line-height CSS вашего контента на 1, или, возможно, меньшее количество. Это зависит от используемого вами шрифта и от того, как его отображает каждый браузер / операционная система.