Должен ли я поместить теги абзаца вокруг изображений? - PullRequest
Новая
       27

Должен ли я поместить теги абзаца вокруг изображений?

8 голосов
/ 28 января 2010

У меня есть веб-страница, где у меня есть текст с изображениями. Я пишу некоторый текст (в абзаце), затем помещаю изображение, затем другой абзац.

Должен ли я также поместить p-теги вокруг изображения или просто оставить его между ними только с помощью тега img?

Причина, по которой я спрашиваю об этом, заключается в том, что до сих пор я просто совмещал изображения между абзацами, но теперь, если я хочу добавить более одного изображения или добавить изображение и привязку, тогда они не будут сидеть вместе правильно. Еще я попробовал добавить 

<p></p>

между двумя изображениями, но я чувствую, что это неправильно: P

Ответы [ 4 ]

4 голосов
/ 28 января 2010

Вы можете использовать CSS, чтобы изображения действовали как блоки, а не как inline-блоки:

Поместите в ваш CSS следующее: 

img { display: block; }

Или, если у вас есть какие-то изображения, которые вы хотите отобразить встроенными, добавьте class="block" к вашим тегам img и измените css на это: 

img.block { display: block; }
2 голосов
/ 19 октября 2011

Стилизация изображения в качестве блочного элемента является частичным решением. HTML должен быть спроектирован так, чтобы «работать» без стилей. Если блочная модель требует, чтобы блочный элемент содержал только блочные или встроенные элементы - не смешанные, - мы должны сделать это на самом низком уровне. Вот почему меню создаются в виде списков, а не наборов ссылок. Это называется изящной деградацией.

Так что ИМХО тег вокруг изображения должен быть добавлен , если узлы рядом с ним являются блочными элементами.

0 голосов
/ 12 мая 2018

Нет ничего плохого в том, что изображения с или без <p></p>. Единственное, что вы должны иметь в виду:

  1. CSS для <p> может повлиять на отступы, поля или ширину изображения так, как вы этого не хотите.
  2. <p> сделает изображение отображаемым как блок.
  3. Если это ваша единственная цель, я бы посоветовал вам включить это правило в свой CSS как img {display: block;} и оставить свой <img> без <p></p>
  4. Если изображения на вашем сайте будут состоять из элементов блока и встроенных элементов, я бы рекомендовал создать класс для каждого из них и указать img {display: block;} и img {display: inline;}
0 голосов
/ 28 января 2010

Я не могу придумать ни одной причины, по которой вы бы не использовали <p><img/></p>, если вы хотите, чтобы это было изложено. таким образом, разметка четко описывает макет.

это, безусловно, более разборчиво, чем изменение типа отображения для всех изображений. Лучшая альтернатива - создать класс CSS img.block {display:block;} + <img class="block"/>

...