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

如果可能，我建议您删除html中的所有<br>标记，然后使用css来实现您想要的内容。

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

1 个答案: