html - 如何添加填充文本以使透明框不重叠？

Question

br {
    display: block;
    line-height: 80px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: .67em 0;    
    text-align: center;    
    color: FloralWhite;
    font-family:'Conv_MilasianCircaMediumPERSONAL','Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
h1 span {  
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-animation: mymove 10s infinite;
    /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}

h3 span {  
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, 0.4);
  -webkit-animation: mymove 10s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 10s infinite;
}

h4 span {  
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, 0.4);
  -webkit-animation: mymove 10s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 10s infinite;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  50% {
    color: GhostWhite;
  }
}
/* Standard syntax */

@keyframes mymove {
  50% {
    color: GhostWhite;
  }
}

p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

需要运行的浏览器为IE10+(非Edge)

<header>
    <div class="header-content">
        <div class="header-content-inner">
            <h1><span>Please be advised flu shots<br>for employees will be:</span></h1><br><h3><span>Friday, October 30, 2015<br>1:30 PM to 3:30PM</span></h3>                
            <p></p>
            <div class="btn btn-primary btn-xl page-scroll" onclick="self.close()"><span>Conference Room 1</span></div>
            <br><br>
            <h4><span>There is no fee but you must bring your health insurance card</span></h4>
        </div>
    </div>
</header>

Answer 1

我想你想要的是使用填充 box-sizing: border-box;

*{
    box-sizing:border-box;
}
span{
    padding: 10px;
}

jsfiddle

如果可能，我建议删除所有 <br>在您的 html 中添加标签并使用 css 来实现您想要的。