【问题标题】:How to get margin in css when border to box? [duplicate]边框到框时如何在css中获得边距? [复制]
【发布时间】:2023-04-07 11:57:02
【问题描述】:

我的页面中有两个div。当我对这些框应用边框时,它们会从顶部获得边距;但是当不应用边框时,框会显示为没有边距。为什么?

.header {
  width: auto;
  height: 100px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  border: 1px solid black;
}

.menu {
  background-color: green;
  height: 80px;
  border: 1px solid black;
}
<div class="header">
  <h1>title</h1>
</div>
<div class="menu"></div>

【问题讨论】:

  • 边距在 h1 上并且仍然存在,它只是改变了边距的间距。不确定您真正想要什么效果,但尝试添加到 h1 { margin: 0;填充:1rem; }

标签: html css margin


【解决方案1】:

overflow:auto 添加到您的.header div。

jsFiddle example

并在您使用时查看collapsing margins

【讨论】:

    猜你喜欢
    • 2015-07-04
    • 2019-04-03
    • 1970-01-01
    • 2018-07-31
    • 1970-01-01
    • 1970-01-01
    • 2012-09-27
    • 2019-05-13
    • 1970-01-01
    相关资源
    最近更新 更多