在html中为段落设置左边距

时间:2010-12-22 07:26:05

标签: html paragraphs

我想在放置5个空格后开始一个段落,并且第一行下面的所有行应该是直线,imean段落中的所有行应该在开始之前有5个空格。

我从数据库获取此段落。

我想要一个Html标签,用于定义完整段落的左边距。

1 个答案:

答案 0 :(得分:14)

<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>标记内容,添加一个新的“样式”节点,并将您要声明的样式包装在类中,如下所示:

<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>

在上面的示例中,只有div中的<p>元素(其类名为“container”)才会应用样式 - 而不是容器外的<p>元素。

除了上述内容之外,您还可以一起收集样式并从<head>标记中删除样式元素,将其替换为<link>标记,该标记指向外部CSS文件。此外部文件是您现在放置<p>标记样式的位置。这个概念被称为“从风格中分离内容”,被认为是一种良好的实践,也是一种创建样式的可扩展方式,可以帮助实现低维护。