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

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

8 голосов
/ 22 декабря 2010

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

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

Мне нужен HTML-тег, который определит левое поле для полного абзаца.

1 Ответ

14 голосов
/ 22 декабря 2010 
<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'.

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

На вашей 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, имя класса которого - 'container', будет иметь примененные стили, а не элемент <p> вне контейнера.

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

...