Question

我有一个部分，该部分的顶部和底部应该有150px的填充，但是无论如何，我都无法显示该填充。示例如下：http://new.cajunland.com/recipe/double-seasoned-cajun-hamburgers/

这是该部分的代码：

.wp-block-mkl-section-block .section-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: no-repeat;
    max-width: none;
    z-index: 0;
}
section.section-hero .wp-block-columns.has-2-columns {
    max-width: 1080px;
    margin: 0 auto;
}
.wp-block-columns {
    flex-wrap: nowrap;
}
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
}
*, ::before, ::after {
    box-sizing: inherit;
}
.wp-block-column.col-two-third {
    flex-basis: calc(60% - 16px);
}
.wp-block-column {
    margin-bottom: 0 !important;
}
.wp-block-column {
    flex-basis: calc(50% - 16px);
    flex-grow: 0;
}
.wp-block-column {
    flex-grow: 1;
    margin-bottom: 1em;
    flex-basis: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
.wp-block-column.col-one-third {
    background: rgb(255,255,255,.9);
    flex-basis: calc(40% - 16px);
    padding: 16px 24px;
}

<section class="wp-block-mkl-section-block section-hero" style="padding-bottom:150px;padding-top:150px">
        <div class="section-bg bg__stretched" style="background: url(http://new.cajunland.com/wp-content/uploads/2019/10/recipe-double-seasoned-cajun-burger.jpg) no-repeat fixed center/100%">
<div class="wp-block-columns has-2-columns">
            <div class="wp-block-column col-two-third">
                <p>&nbsp;</p>
            </div>
            <div class="wp-block-column col-one-third">
                <h1>Double Seasoned Cajun Hamburgers</h1>
                <p style="color:#000;"><strong>Yield:</strong> 4<br><strong>Prep Time:</strong> 15 minutes<br><strong>Cook Time:</strong> 10-15 minutes</p>
            </div>
        </div>
    </div>
</section>

Answer 1

我检查了您的示例页面padding-top，并且padding-bottom正在运行。见下文

但是您已经通过使用 position：absolute 修复了section-bg部分，因此对top和bottom进行填充是有效的，但是没有任何作用。您必须将填充内容分配给section-bg类。

.wp-block-mkl-section-block .section-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  max-width: none;
  z-index: 0;;
  padding-bottom: 150px;
  padding-top: 150px;
}

codepen

Answer 2

有填充物，但.section-bg框具有position: absolute和top: 0。

您可以增加最大值，然后将background属性移到该部分。也许使用height: 300px代替填充。

Answer 3

尝试一下并删除填充：内联样式的顶部和底部为150px。

.wp-block-mkl-section-block .section-bg {
    position: absolute;                 /* Remove this line */
    padding-bottom: 150px!important;    /* Add !important   */
    padding-top: 150px;                 /* Add !important   */
    top: 0;                             /* Remove this line */
    left: 0;                            /* Remove this line */
    bottom: 0;                          /* Remove this line */
    right: 0;                           /* Remove this line */
    background-repeat: no-repeat;
    max-width: none;
    z-index: 0;
    margin: 0 auto;
}

Answer 4

我解决了。 Jaakko在切换位置方面是部分正确的：.section-bg div中的绝对位置相对于相对位置。我也将背景图像移到了父部分，所以现在就在其中。固定所有。谢谢大家。

为什么顶部填充不应用于我的部分？

4 个答案: