Question

我有这个HTML结构：

application/json

https://jsfiddle.net/thadeuszlay/Lkdo5xv3/2/

每个部分直接相互接触，即部分之间没有其他元素。但不知何故，你可以看到每个部分之间的间隙（绿色背景颜色）。

我已经将填充和身体边缘设置为零。我也用DIV替换了这些部分。但差距仍然存在。

如何摆脱差距并使每个部分接触到其他部分而没有间隙？

Answer 1

在样式开头重置所有对象的填充和边距

* {
margin:0;
padding:0;
}

之后，您可以根据需要为每个对象设置填充和边距

Answer 2

这是绿色背景的来源。你看到的是body元素。想象一下，有一些“洞”＆＃39;在您的布局中，您可以通过它看到背后的内容。

我建议您始终使用CSS Normalizer来协调和设置元素的合理默认值。

在您的示例中，您需要添加：

h2 { margin: 0; padding: 0}
body { margin: 0; }

以及删除部分的填充。这是工作片段：

＆＃13;

body {
  padding: 0;
  margin: 0;
  background: green;
}
ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 10px;
}
.zero,
.one,
.two,
.three,
.four {
  padding: 40px 0;
  font-size: 20px;
}
.outer-box {
  background-color: blue;
  padding-top: 100px;
}
.zero {
  background: red;
}
.one {
  background: LightSeaGreen;
}
.two {
  background: LightGreen;
}
.three {
  background: HotPink;
}
.four {
  background: LightSteelBlue;
}
h2 {
  margin: 0;
  padding: 0;
}

＆＃13;

<body cz-shortcut-listen="true">
  <div id="panels">
    <section id="sect0" name="lvl0">
      <div id="divLvel0" class="level zero">
        <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
      </div>
    </section>
    <section id="sect1" class="outer-box" name="lvl1">
      <div id="divLvel1" class="level one">
        <div id="panel_lvl1">
          <h2>Languages</h2>
        </div>
      </div>
    </section>
    <section id="sect3" class="outer-box" name="lvl3">
      <div id="divLvel3" class="level three">
        <div id="panel_lvl3">
          <h2>Milestones</h2>
          <div id="chart3">
          </div>
        </div>
      </div>
    </section>
    <section id="sect4" class="outer-box" name="lvl4">
      <div id="divLvel4" class="level four">
        <div id="panel_lvl4">
          <h2>Details</h2>
          <div id="chart4">
          </div>
        </div>
      </div>
    </section>
  </div>
</body>

＆＃13;

Answer 3

我的评论不正确，你的身体有一个边缘，这就是为什么你有元素周围的空间。

我假设您正在使用具有类似渲染引擎的浏览器，因此它们有时会出现可能无法显示的默认样式。看起来就像这里的情况一样，只需将所有元素的margin-bottom设置为0，或者只是重置所有元素的边距和填充，并在需要时添加它们。

* {
  margin: 0;
  padding: 0;
}
body {
  background: green;
}
.zero,
.one,
.two,
.three,
.four {
  min-height: 100vh;
  max-height: 1000px;
  font-size: 20px;
}
section {
  padding-top: 100px;
}
.zero,
.sel:nth-child(1) {
  background: red;
}
.one,
.sel:nth-child(2) {
  background: LightSeaGreen;
}
.two,
.sel:nth-child(3) {
  background: LightGreen;
}
.three,
.sel:nth-child(4) {
  background: HotPink;
}
.four,
.sel:nth-child(5) {
  background: LightSteelBlue;
}
#sect0,
#sect1,
#sect2,
#sect3,
#sect4 {
  /* The image used */
  background: blue;
}

<body cz-shortcut-listen="true">
  <div id="panels">
    <section id="sect0" name="lvl0">
      <div id="divLvel0" class="level zero">
        <h2>top<nav><ul><li><a href="#sect1">Languages</a></li><li><a href="#sect2">Proficiency</a></li><li><a href="#sect3">Milestones</a></li><li><a href="#sect4">Details</a></li></ul></nav></h2>
      </div>
    </section>
    <section id="sect1" name="lvl1">
      <div id="divLvel1" class="level one">
        <div id="panel_lvl1">
          <h2>Languages</h2>
        </div>
      </div>
    </section>
    <section id="sect2" name="lvl2">
    </section>
    <section id="sect3" name="lvl3">
      <div id="divLvel3" class="level three">
        <div id="panel_lvl3">
          <h2>Milestones</h2>
          <div id="chart3">
          </div>
        </div>
      </div>
    </section>
    <section id="sect4" name="lvl4">
      <div id="divLvel4" class="level four">
        <div id="panel_lvl4">
          <h2>Details</h2>
          <div id="chart4">
          </div>
        </div>
      </div>
    </section>
  </div>
</body>

Answer 4

添加填充和边距0.另外将html更改为：

YouTubeDataCache {
    protected $objectId;
    protected $snippet;
    protected $status;
    protected $thumbnails = array();
    protected $expirationDate;

    __construct($dataObject = null) {
        $this->expirationDate = time() + 86400;

        if ($dataObject === null) {
            return;
        }

        $this->objectId = $dataObject->getId();
        $this->snippet = $dataObject->getSnippet();
        $this->status = $dataObject->getStatus();

        $thumbs = $dataObject->getThumbnails();

        if ($thumbs->getDefault()) {
            $this->addThumbnail('default', $thumbs->getDefault());
        }
        if ($thumbs->getMedium()) {
            $this->addThumbnail('medium', $thumbs->getMedium());
        }
        if ($thumbs->getHigh()) {
            $this->addThumbnail('high', $thumbs->getHigh());
        }
        if ($thumbs->getMaxRes()) {
            $this->addThumbnail('maxRes', $thumbs->getMaxRes());
        }
    }

    public function setExpirationDate($expirationDate) {
        $this->expirationDate = $expirationDate;
    }

    public function addThumbnail($name, $data) {
        $this->thumbnails[$name] = $data;
    }

    public function getObjectId() {
        return $this->objectId;
    }

    public function setObjectId($objectId) {
        $this->objectId = $objectId;
    }

    public function getSnippet() {
        return $this->snippet;
    }

    public function setSnippet($snippet) {
        $this->snippet = $snippet;
    }

    public function getStatus() {
        return $this->status;
    }

    public function setStatus($status) {
        $this->status = $status;
    }

    public function toJSON() {
        $array = array(
            'objectId'          => $this->objectId,
            'snippet'           => $this->snippet,
            'status'            => $this->status,
            'thumbnails'        => $this->thumbnails,
            'expirationDate'    => $this->expirationDate
        );

        return json_encode($array);
    }

    public static function fromJSON($json) {
        $data = json_decode($json);

        $cacheObject = new YouTubeDataCache();

        $cacheObject->setExpirationDate($data->expirationDate);
        $cacheObject->setObjectId($data->objectId);
        $cacheObject->setSnippet($data->snippet);
        $cacheObject->setStatus($data->status);

        foreach($data->thumbnails as $name => $thumbnail) {
            $cacheObject->addThumbnail($name, $thumbnail);
        }

        return $cacheObject;
    }
}

或者在一行中：

<section></section><!--
--><section></section>

HTML中各节之间的空间是多少？

4 个答案: