当我将父元素的填充设置为零时，CSS边距被'忽略'？

时间：2018-04-09 17:12:32

标签： html css

我正在使用Materialize.css撰写使用条款页面，该页面包含在card-panel中。我发现'原样'，顶部的间距太大了：

enter image description here

此处，margin-top元素的h4会添加到包含padding的{​​{1}}，即24px。我认为前者实际上距离阴影框的顶部有足够的间距，因此我尝试使用以下SCSS规则将此card-panel的{​​{1}}设置为零：

padding-top

然而，启用此功能后，我发现间距变得太小：

enter image description here

当我突出显示它时，似乎card-panel元素的.lucy-terms { .card-panel.lucy-card-panel { padding-top: 0; } } 不在框外。元素的margin-top不应该属于包含元素吗？我该如何解决这个问题？

我已在下方附上相关摘要。

h4
margin

2 个答案:

答案 0 :(得分：0)

我只是从h4的顶部删除边距。

.card-content h4 { margin-top: 0; }

答案 1 :(得分：0)

我通过将display: inline-block添加到父元素（card-panel）来解决它：

.lucy-terms {
  .card-panel.lucy-card-panel {
    padding-top: 0px;
    display: inline-block;
  }
}

现在看起来像这样：

enter image description here

相关问题
最新问题