DIV空白删除。普通技术不起作用

Question

我正在制作一个“3块”设计。整个设计是垂直对齐的中间。我想删除div之间的空白区域。

如果我设置body{font-size: 0px;}它看起来应该是这样，那么我给每个孩子它自己的字体大小。但是，一旦我给了一个以上的孩子一个大小，它就会回到第一阶段。我并不过分热衷于这种方法，因为这意味着我不能使用它的大小。

我也试图在结束div之后和开场之前发表评论。

</div><!--
--><div>

但这一次，它也不起作用;这令人费解。

我能想到的唯一另外两个选项是没有HTML5支持的关闭标签，但是草率且实际上不正确或者使用负边距，这又是一个;不正确，并且某些设备/浏览器出现问题。

有没有人有一个干净，易读的解决方案来解决这个问题？

    html,
    body {
      height: 100%;
    }
    html {
      display: table;
      margin: auto;
    }
    body {
      background-color: #BFBFBF;
      width: 1180px;
    }
    #header {
      background-color: #EEEEEE;
      width: 1180px;
      height: 165px;
    }
    #content {
      background-color: #EEEEEE;
    }
    #footer {
      background-color: #35363A;
      height: 76px;
    }
    .table {
      font-size: 12px;
      color: #333333;
      border-width: 1px;
      border-color: #729ea5;
      border-collapse: collapse;
    }
    .table th {
      font-size: 12px;
      background-color: #acc8cc;
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #729ea5;
      text-align: left;
    }
    .table tr {
      background-color: #ffffff;
    }
    .table td {
      font-size: 12px;
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #729ea5;
    }
    .table tr:hover {
      background-color: #ffff99;
    }

<div id="header">
  <a href="index.php">
    <img id="logo" src="./images/logo.png" />
  </a>
  <div id="navigation">
    <ul>
      <a href="./index.php">
        <li>Home</li>
      </a>
      <a href="./newsletter.php">
        <li>Newsletter</li>
      </a>
      <a href="../users/list.php">
        <li>User List</li>
      </a>
      <a href="./admin/index.php">
        <li>Admin Panel</li>
      </a>
    </ul>
  </div>
</div>
<div id="content">
  <p>
    <br />
    <h2></h2>
    <br />
    <br />

    <ol>

    </ol>
  </p>
</div>
<div id="footer">
  <p class="copyright"></p>
</div>

Answer 1

我所做的就是添加：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context="com.tbohne.kittens.front.TabTechnology"
             android:orientation="vertical">

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:id="@+id/view_table"
        android:layout_above="@+id/view_details" />

    <View android:layout_width="match_parent"
          android:layout_height="1px"
          android:background="?android:attr/listDivider" />

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:id="@+id/view_details"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true" />

</LinearLayout>

边缘消失了（看下面的片段）。

但是我很确定你想要一个更具体的选择器，因为根本不推荐使用p, div, ol { margin: 0px; } 选择器。

*

    html,
    body {
      height: 100%;
    }
    html {
      display: table;
      margin: auto;
    }
    p, div, ol {
      margin: 0px;
    }
    body {
      background-color: #BFBFBF;
      width: 1180px;
    }
    #header {
      background-color: #EEEEEE;
      width: 1180px;
      height: 165px;
    }
    #logo {} #logout {} #navigation {} ul {} ul li {} ul li:hover {} ol {} .todo {} .wip {} .done {} a {} a:visited {} #content {
      background-color: #EEEEEE;
    }
    #footer {
      background-color: #35363A;
      height: 76px;
    }
    ul {} li {} .copyright {} form {} #newslettercontent {} .table {
      font-size: 12px;
      color: #333333;
      border-width: 1px;
      border-color: #729ea5;
      border-collapse: collapse;
    }
    .table th {
      font-size: 12px;
      background-color: #acc8cc;
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #729ea5;
      text-align: left;
    }
    .table tr {
      background-color: #ffffff;
    }
    .table td {
      font-size: 12px;
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #729ea5;
    }
    .table tr:hover {
      background-color: #ffff99;
    }