时间戳

首页 > 解决方案 > 页面顶部到第一个 div 的距离

html - 页面顶部到第一个 div 的距离

问题描述

我想在我的网站左侧制作一个搜索栏。我在导航 div 周围做了一个右侧边框。有这个没有线的小空白区域的问题。如何使到页面顶部的距离为 0px？

body,
html {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  padding-left: 10px;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #36e7ff;
}

nav {
  width: 10%;
  padding-top: 0px;
  padding-bottom: 100%;
  border-right: 3px solid white;
  float: left;
  margin-right: 2%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="navigation.css">
  <title>Home</title>
</head>

<body contenteditable="false">
  <nav>

  </nav>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>´
</body>

</html>

我也试过：top: 0px, margin-top: 0px...

我要这个：

在此处输入图像描述

而不是这个：

在此处输入图像描述

标签： htmlcss

解决方案

段落<p>标签的顶部和底部也有默认边距。添加 CSS 规则以关闭该边距会将内容置于顶部。

编辑：我为标签添加了填充，<p>因此它的内部内容会像您在图像中描绘的那样向下移动。

body, html {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  padding-left: 10px;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #36e7ff;
}

nav {
  width: 10%;
  padding-top: 0px;
  padding-bottom: 100%;
  border-right: 3px solid white;
  float: left;
  margin-right: 2%;
}

p {
  margin: 0;
  padding-top: 10px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="navigation.css">
    <title>Home</title>
</head>

<body contenteditable="false">
    <nav>

    </nav>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>´
</body>

</html>

您应该打开浏览器的开发人员工具并检查页面上的元素以查看它们的几何形状是如何确定的。

推荐阅读