如何使用h1添加一行：在带有填充的h1元素之后

Question

当我尝试使用填充创建一个h1元素并将其设置为内联时，然后使用h1跟进屏幕宽线：最后在新行上填充h1元素的填充，我怎么能得到h1元素的paddin在水平线之前？

css代码如下。

h1 {
    font-size: 15px;    
    background: #ccc;
    display: inline;
    padding: 8px 0px 5px 10px;
}


.headline {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
}

h1:after {
    content:' ';
    display:block;
    border:4px solid #ccc;
    border-radius:1px;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

html代码只是一个在h1元素中带有类标题的span。

目前看起来像这样： 我希望它看起来几乎相同，只是填充在文本末尾的行下方。

Answer 1

你正在思考这个问题。

将h1保留为块级项目，并将样式移至span。

h1 {
  font-size: 15px;
}

.headline {
  font-family: Calibri, "Helvetica", san-serif;
  line-height: 1.5em;
  color: black;
  font-size: 20px;
  background: #ccc;
  padding: 8px 10px 3px 10px;
}

h1 {
  border-bottom: 4px solid #ccc;
}

<h1><span class="headline">Headline</span></h1>

Answer 2

尝试 h1显示：-webkit-inline-box;或inline-flex;