以div padding为中心的样式

一、padding的作用

原始标题 padding是CSS属性中很常见的一个属性，它用来定义元素的内边距，其实就是元素的内容区域与边框之间的距离。 对于上述的代码示例来说，padding: 20px;声明在.title-container这个class中，导致.title-container的容器和元素之间存在20px的内边距，从而让包裹的h1标签与外部有更多的空间分隔，更加美观。

.title-container {
  padding: 20px;
}

二、div与h1标签的样式

原始标题 在.title-container的包裹下，有一个h1标签，用来展示标题。我们可以在样式表中声明.title-container h1这个选择器，对标题进行样式的设置。 在上述的代码示例中，我们为h1标签定义了字体大小为30px，字体加粗，上下无margin，居中对齐。这样就让页面中的标题在视觉上更加醒目。

.title-container h1 {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-align: center;
}

三、代码示例

下面是完整代码示例：

<style>
  /* 以div padding为中心的样式 */
  .title-container {
    padding: 20px;
  }
  /* 原始的标题样式 */
  .title-container h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
  }
</style>  
<div class="title-container">      
  <h1>原始标题</h1>    
</div>