text-indent实现文本缩进布局

      今天的总结很简单，但对于初学者来说，特别是对于我这个初入前端门槛的开发者来说，就不是那么地简单了（这里指不容易想到）。

      好了，废话不多说，今天的总结就是一个对文本缩进的简单应用。如何做到标题与内容的分离呢？如下图：



      就是做这么一个简单的标题与内容的分离，看似简单，但对于我这个初生牛犊确实难以想到（text-indent可以有负值来设置）。这不，想了很长时间才想了出来。

      你只需编写以下文档及写以下样式就可以轻松搞定。

HTML文档：

<p class="text_layout_test">header:这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试，这是一个关于文本布局的测试。</p>

 style样式：

html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img{margin: 0;padding:0;}
.text_layout_test{padding:5px 10px 5px 60px;text-indent: -3.5em;}

      好了，首先要给这段文档设置一个padding，这是在设置text-indent之前的一些设置。是为了防止在设置text-indent为负值时，导致文本隐藏，设置padding后就可以有效避免。随后，给文本设置一个text-indent:-3.5em;就可以了。