Установить левое поле для абзаца в HTML

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

Я получаю этот абзац из базы данных.

Я хочу HTML-тег, который будет определять левое поле для полного абзаца.

Источник

1 ответ

Решение
<p style="margin-left:5em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet. Phasellus tempor nisi eget tellus venenatis tempus. Aliquam dapibus porttitor convallis. Praesent pretium luctus orci, quis ullamcorper lacus lacinia a. Integer eget molestie purus. Vestibulum porta mollis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

Это будет сделано, есть несколько улучшений, очевидно, но это основы. И я пользуюсь 'em' в качестве измерения вы можете использовать другие единицы измерения, такие как 'px',

РЕДАКТИРОВАТЬ: То, что они описывают выше, это способ связать группы стилей или классов с элементами на веб-странице. Вы можете реализовать это несколькими способами, вот один, который может вам подойти:

На вашей HTML-странице, содержащей <p> помеченное содержимое из вашей БД добавьте в новый узел 'style' и оберните стили, которые вы хотите объявить в классе, следующим образом:

<head>
  <style type="text/css">
    p { margin-left:5em; /* Or another measurement unit, like px */ }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet.</p>
</body>

Итак, выше всего <p> к элементам в вашем документе будет применено это правило стиля. Возможно, вы закачиваете содержимое абзаца в какой-то контейнер? Попробуй это:

<head>
  <style type="text/css">
    .container p { margin-left:5em; /* Or another measurement unit, like px */ }
  </style>
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia vestibulum quam sit amet aliquet.</p>
  </div>
  <p>Vestibulum porta mollis tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
</body>

В приведенном выше примере только <p> элемент внутри div, имя класса которого - "контейнер", будет иметь примененные стили, а не <p> элемент вне контейнера.

В дополнение к вышесказанному вы можете собрать свои стили вместе и удалить элемент стиля из <head> тег, заменив его <link> тег, который указывает на внешний файл CSS. Этот внешний файл находится там, где вы сейчас <p> стили тегов. Эта концепция известна как "отделение контента от стиля" и считается хорошей практикой, а также является расширяемым способом создания стилей и может помочь при низких эксплуатационных расходах.

Источник
Другие вопросы по тегам