CSS-ссылка Интервал и расстояние между абзацами

Question

Вот сайт:

http://wesbos.com/tf/shutterflow/?cat=1

1. Изображение баннера на той стороне, на котором написано S & S photography, добавляет отступ в несколько пикселей внизу. Это происходит только тогда, когда я связываю его с URL.

2. Переместите изображение, чтобы увидеть выделенный текст. Это прекрасно работает, за исключением того, что я хотел бы добавить некоторые отступы в конце строк. Обычное заполнение CSS применяет его только к началу и концу тегов P. Мой код должен быть отформатирован следующим образом: (если кто-то не знает, как дублировать этот эффект, когда каждая строка является тегом абзаца

Извините за форматирование, редактор почему-то не позволил мне поместить код в несколько строк.

    <p>hey hows it going<br/> this one is<br/> short and this one is longer<br/> will this text<br/> </p>

.cover p {
    display: inline;
   color: #000;
   background-color: #fff;
   padding:5px;
}

Answer 1

Чтобы избавиться от лишнего пространства внизу изображения вашего баннера, используйте:

#sidebar a img {vertical-align:bottom;}

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

Answer 2

Для боковой панели:

Установите ваше изображение на display:block;, чтобы удалить лишнее пространство. Из-за других ваших стилей вы также должны будете добавить либо clear:both; к изображению, либо убрать поплавок в верхней части ul (все, что он делает - это очищает всплывающие li, что можно сделать, используя overflow:hidden; вместо).

Для текста при наведении:

Вы должны будете использовать отдельные параграфы, чтобы получить отступы, но это легко сделать в WP. Вам не нужны дополнительные <br /> в конце каждого, если вы используете float вместо display:

 .cover p {
    float: left; /* so they don't fill the full width */
    clear: both; /* so they don't float next to each other */
    color: #000;
    background-color: #fff;
    padding:5px;
 }

Конечно, я бы тоже оставил display: inline; везде, где ты плаваешь. Он заботится об двойной ошибке с плавающей запятой в IE5 / 6. Но это другая проблема.

Answer 3

Вы должны быть в состоянии сделать это с каждой строкой, равной

, но вам придется добавить дополнительные
в конце каждой:

HTML:

<h3>Nature Orange</h3>
<p>hey hows it going<br /></p>
<p>this one is<br /></p>
<p>short and this one is longer<br /></p>
<p>will this text<br /></p>
<p>do what I<br /></p>
<p>Want?</p>

CSS:

.cover p{  
    display:inline;
    color: #000;
    background-color: #fff;
    margin:0;
    padding:0 5px;
    line-height:1;
    }

Я загрузил демо этого здесь: http://demo.raleighbuckner.com/so/1303628/

Answer 4

Вам нужно будет обернуть каждую строку в элементе. Интервал будет хорошим выбором:

<p><span>hey hows it going</span><br /><span>this one is</span>...

Затем вы можете добавить свой отступ к элементам span.

.cover p {
   display: inline;
   color: #000;
   background-color: #fff;
}

.cover span {
   padding:5px;
}