我怎样才能减少我的 h2 (HTML/CSS) 以上的 "whitespace" 的数量？

Question

我有一个页面看起来像这样：

它即将出现，但我希望顶部边框和 "Top 10 Items Purchased" h2 元素之间的 "dead space" 或白色 space 更少。

这是相关的 CSS 和 HTML:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.contents {
  height: 50%;
  width: 100%;
}
.topleft {
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid black;
}
.sectiontext {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Candara, Calibri, Cambria, serif;
  color: green;
}
.bottommarginbreathingroom {
  margin-bottom: 2px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div class="contents">
    <div class="row">
      <div class="col-md-6">
        <div class="topleft">
          <h2 class="sectiontext">Top 10 Items Purchased</h2>
          <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label>to</label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
          </div>

          <table>
            <tr>
              <th>Item Code</th>
              <th>Description</th>
              <th>Qty</th>
            </tr>
            <tr>
              <td>100250</td>
              <td>Artichokes Green Globe 18 Size</td>
              <td>9084</td>
            </tr>

我尝试添加：

padding-top: -12px;

...到 sectiontext class，然后是左上角 class，那是无效的。

我必须怎么做才能减少顶部边框和第一行文本 (h2) 之间的 space？

Answer 1

您需要从 h2 中删除上边距。您可以将 margin-top:0 添加到 .section-text，然后相应地进行调整。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.contents {
  height: 50%;
  width: 100%;
}
.topleft {
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 0px 16px 16px 16px;
  border: 1px solid black;
}
.sectiontext {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Candara, Calibri, Cambria, serif;
  color: green;
  margin-top: 0;
}
.bottommarginbreathingroom {
  margin-bottom: 2px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div class="contents container">
    <div class="row">
      <div class="col-md-6">
        <div class="topleft">
          <h2 class="sectiontext">Top 10 Items Purchased</h2>
          <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2" />

            <label>to</label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2" />

          </div>

          <table>
            <tr>
              <th>Item Code</th>
              <th>Description</th>
              <th>Qty</th>
            </tr>
            <tr>
              <td>100250</td>
              <td>Artichokes Green Globe 18 Size</td>
              <td>9084</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.contents {
  height: 50%;
  width: 100%;
}
.topleft {
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid black;
}
.sectiontext {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Candara, Calibri, Cambria, serif;
  color: green;
}
.bottommarginbreathingroom {
  margin-bottom: 2px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div class="contents">
    <div class="row">
      <div class="col-md-6">
        <div class="topleft">
          <h2 class="sectiontext">Top 10 Items Purchased</h2>
          <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label>to</label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
          </div>

          <table>
            <tr>
              <th>Item Code</th>
              <th>Description</th>
              <th>Qty</th>
            </tr>
            <tr>
              <td>100250</td>
              <td>Artichokes Green Globe 18 Size</td>
              <td>9084</td>
            </tr>

Answer 2

您在 topleft class 上设置了 margin-top: 16px;。该元素的 margin-top 为 16px。因此 children 中的 class 比您预期的低 16px。

在您的 CSS 中，从 topleft class 中删除 margin-top: 16px; 应该可以。当然，如果您仍然想要一点上边距，您可以将 16px 调低一些。

Answer 3

您可以尝试从 h2 中删除边距。

H2 附带以下内容：-

 h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

试试这个：-

  h2{
        margin:0
        }

Answer 4

添加：
.sectiontext { margin-top:-4px; }
这不是最好的解决方案，但它应该是解决您的问题的快速方法。
将 -4px 调整为任何值。

Answer 5

在.topLeft中设置padding: 0px 16px;

Answer 6

是你想要的吗？

从 .topleft class 中删除了顶部填充。

另外 row 应该被包裹在 container class 中。

还有一点，与边距不同，填充值不能为负。 ~~padding-top: -12px;~~

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.contents {
  height: 50%;
  width: 100%;
}
.topleft {
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 0px 16px 16px 16px;
  border: 1px solid black;
}
.sectiontext {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Candara, Calibri, Cambria, serif;
  color: green;
}
.bottommarginbreathingroom {
  margin-bottom: 2px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div class="contents container">
    <div class="row">
      <div class="col-md-6">
        <div class="topleft">
          <h2 class="sectiontext">Top 10 Items Purchased</h2>
          <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2" />

            <label>to</label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2" />

          </div>

          <table>
            <tr>
              <th>Item Code</th>
              <th>Description</th>
              <th>Qty</th>
            </tr>
            <tr>
              <td>100250</td>
              <td>Artichokes Green Globe 18 Size</td>
              <td>9084</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 7

移除上边距，例如：

.sectiontext {

上边距:0px;

}

我怎样才能减少我的 h2 (HTML/CSS) 以上的 "whitespace" 的数量？

How can I reduce the amount of "whitespace" above my h2 (HTML/CSS)?

html

css

padding

twitter-bootstrap