Question

我有一些我希望并排显示的div，我希望它们看起来像按钮，所以我添加了背景和填充。但我发现由于某种原因，第一个div的顶部填充没有出现。

（在我的浏览器中，底部填充也从最后一个填充中丢失，但这不会出现在代码示例中。）

我无法弄清楚为什么会这样，谁能提供解决方案？

div.i-see-also-link
{
    display:inline-block;
    padding-top:20px;
    padding: 20px;
    background-color:blanchedalmond;
    height:10px;
    border: solid 1px black;
}
.i-section-heading {
    padding-bottom: 50px;
}
.i-page-title, h1, h3, h4, .i-section-heading, .i-see-also-sub-heading {
    margin-bottom: -.3em;
}
.i-section-heading {
    clear: both;
}
.i-page-title, h1, h2, h3, h4, .i-section-heading, .i-see-also-sub-heading {
    color: #222;
}
h2, .i-section-heading {
    font-size: 1.75em;
}

div {
    display: block;
}
body {
    color: #222;
    font-style: normal;
}
body {
    font-family: 'Segoe UI',Segoe,'Segoe WP','Helvetica Neue',Helvetica,sans-serif;
    font-weight: normal;
    font-size: 100%;
    margin: 0;
}
.i-section-content > :first-child, .i-description-content > :first-child, .i-returns-content > :first-child, .i-description > :first-child, .i-section-content .i-first-child, .i-description-content .i-first-child, .i-returns-content .i-first-child, .i-description .i-first-child {
    padding-top: 0;
    margin-top: 0;
}
div.i-see-also-link {
    display: inline-block;
    padding-top: 20px;
    padding: 20px;
    background-color: blanchedalmond;
    height: 10px;
    border: solid 1px black;
}

<div class="i-section-heading" id="i-seealso-section-heading"><span class="i-section-heading-icon"><!-- --></span><span class="i-section-heading-text">See Also</span></div><div id="i-seealso-section-content" class="i-section-content" style="display: block;"><div class="i-see-also-link">
<a href="A1R_pMonthlyDebitProcess.html">Monthly</a></div>
<div class="i-see-also-link">
<a href="A1R_fBillingUtility.html">Daily</a></div>
<div class="i-see-also-link">
<a href="A1R_fBillingUtilityFilters.html">Annually</a></div>
<!--DXMETADATA end-->
</div><div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px"><p>bla bla bla</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><p>For more information visit theKnowledge Center</p><!--DXMETADATA end-->
            </div>

Answer 1

padding-top未出现的原因是因为它被以下规则重置：

.i-section-content > :first-child, .i-description-content > :first-child,
.i-returns-content > :first-child, .i-description > :first-child,
.i-section-content .i-first-child, .i-description-content .i-first-child,
.i-returns-content .i-first-child, .i-description .i-first-child {
    padding-top: 0;
    margin-top: 0;
}

您必须使用更高优先级的选择器或!important来覆盖该规则。

<强>段：

div.i-see-also-link {
  display: inline-block;
  padding-top: 20px;
  padding: 20px!important;
  background-color: blanchedalmond;
  height: 10px;
  border: solid 1px black;
}

div {
  display: block;
}

body {
  color: #222;
  font-style: normal;
}

body {
  font-family: 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
  margin: 0;
}

.i-section-content> :first-child,
.i-description-content> :first-child,
.i-returns-content> :first-child,
.i-description> :first-child,
.i-section-content .i-first-child,
.i-description-content .i-first-child,
.i-returns-content .i-first-child,
.i-description .i-first-child {
  padding-top: 0;
  margin-top: 0;
}

<div id="i-seealso-section-content" class="i-section-content" style="display: block;">
  <div class="i-see-also-link">
    <a href="A1R_pMonthlyDebitProcess.html">Monthly</a></div>
  <div class="i-see-also-link">
    <a href="A1R_fBillingUtility.html">Daily</a></div>
  <div class="i-see-also-link">
    <a href="A1R_fBillingUtilityFilters.html">Annually</a></div>
</div>

内联块元素忽略填充

1 个答案: