css - css 新手正在寻找更优雅的 css 缩进文本解决方案

Question

我有以下CSS类：

#header h1 {
   float:left;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   font-size: 2.5em;
   margin-top: 8px;
   margin-left: 0.8em;
   padding-left: 40px;
   background: url("h1bkgrnd.png") no-repeat left center;
   height: 100px;
}

这个html：

 <div id="header">
   <h1><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Our Services</h1>
</div>

它工作正常，但正如你所看到的，我有一堆 将文本推到右边。否则，它位于图片的顶部。有一个更好的方法吗？

谢谢。

Answer 1

不出所料，要缩进文本，您应该使用text-indentCSS 属性。

#header h1 {
  text-indent: 1em;
  /* ... */
}

Answer 2

添加：

#header h1 {
    padding-left: 20px; /*Or according with the picture size you have*/
}

必须工作。

Answer 3

你有几个选择，但text-indent似乎是最合适的。

Answer 4

这取决于您要缩进什么，您是从另一个元素缩进还是从另一个文本缩进。

p {
  margin-left: 20px;
}

p {
  text-indent: 20px;
}

Answer 5

如果您真的不希望图像位于文本的背景中，则将图像分离到图像标签中似乎是最佳选择。

HTML：

<img src="http://placekitten.com/g/50/100"/>
<h1>Our Services</h1>

CSS：

img{
 float:left;
 width:50px;
 height: 50px;
}

h1{
 padding-left: 60px;
}

http://cssdeck.com/labs/xixebfxw。在这种情况下，我必须通过提供适当的宽度和高度作为文本来重新调整图像的大小！此外，margin-left 也可以用于 padding-left。

如果间距不是问题，您只需将文本放在右侧，将图像放在左侧而不删除图像作为背景，您可以这样做：http ://cssdeck.com/labs/wml9occf但这可能不是最好的选择。