html - CSS - 页面分隔符的内联元素边距问题

Question

我正在尝试实现以下页面分隔符:

但是，我要结束这个:

显然黄色只是告诉我顶部和底部在哪里(应该是白色的)，我似乎得到了这个不需要的顶部和底部边距。我尝试了一些方法，包括 display:inline-block、display:inline、margin-top:-2px 但我失去了我的东西我已经尝试过，但我没有。 span 最初是一个 div，但这是我尝试更改的众多内容之一。

这是我最后一次尝试:

<style>
.pageDivider {
    margin: 30px 0;
    background: #E5E5E5;
    padding: 0;
    text-align: center;
}
.pageDivider .inner {
    line-height: 24px;
    margin: 0 auto;
    padding: 0 15px;
    background: yellow;
    font-size: 16px;
    color: #333;
}
</style>

<div class="pageDivider"><span class="inner">SHARE</span></div>

关于如何正确执行此操作的任何线索？

Answer 1

我无法删除我的问题，所以我将分享我刚刚找到的解决方案，它确实非常有效 - 我希望它能帮助其他人。

JSFIDDLE DEMO

h6.pageDivider {
    font-family: 'Lato', 'Open Sans', sans-serif;
    overflow: hidden;
    text-align: center;
    margin: 40px 0;
    font-weight: 700;
    color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
    background-color: #E9E9E9;
    content: "";
    display: inline-block;
    height: 18px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h6.pageDivider:before {
    right: 30px;
    margin-left: -50%;
}
h6.pageDivider:after {
    left: 30px;
    margin-right: -50%;
}

<h6 class="pageDivider">HELLO WORLD</h6>