Question

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

它即将到来，但我想要更少的“死空间”或顶部边框与“购买的十大项目”h2元素之间的空白。

这是相关的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类，然后是topleft类，那是无效的。

我必须做些什么来减少顶部边框和第一行文字（h2）之间的空间？

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

您在margin-top: 16px;课程上设置了topleft。该元素的边距为16px。所以那个班级的孩子比你想象的要低16px。

在您的margin-top: 16px;课程中删除topleft的CSS应该可行。当然，如果您仍然需要一点点上限，您可以将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中设置填充：0px 16px;

Answer 6

你想要的吗？

从.topleft类中移除了顶部填充。

此外，row应该包含在container类中。

还有一件事，与保证金不同，填充值不能为负数。 ~~padding-top: -12px;~~

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 7

删除上边距，例如：

.sectiontext {

的margin-top：0像素;

}

如何减少h2（HTML / CSS）之上的“空白”数量？

7 个答案: