我正在尝试将一些css添加到我正在处理的站点中，以便练习django。因此，我在两个div上遇到了一些问题，更准确地说，它们之间的空格或白线。
如果我输入简单的文本，一切都很好，没有白线。另外，我对 p 和其他标签有问题，但最终想通了，通过将填充和边距设置为 0 来摆脱白线。但是我应该如何处理这些块内容 - 我不知道。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
padding: 0px;
margin: 0px;
}
.sidebar{
background-color: red;
}
.main-content{
background-color: blue;
margin: 0;
padding: 0;
}
</style>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="sidebar">
<a href="#">Home</a>
<a href="#">Lists</a>
<a href="#">Create</a>
</div>
<div class="main-content">
{% block content %}{% endblock %}
</div>
</body>
</html>
所以，两个div(.sidebar和.main-content(之间有一条白线，我不知道为什么它会出现在那里。我也尝试了溢出：隐藏，但它并没有完全解决问题。它用填充物或我无法控制的东西代替了白线，这意味着无论如何都无法摆脱它。谢谢。 IMG 我得到什么
{% extends 'main/base.html' %}
{% block title %}Lists{% endblock %}
{% block content %}
<h1>{{mylist.title}}</h1>
<form method="POST">
{% csrf_token %}
<ul>
{% for content in mylist.contentbase_set.all %}
{% if content.done == False %}
<li><input type="checkbox" name="c{{content.id}}">{{content.content}}</li>
{% elif content.done == True %}
<li><input type="checkbox" name="c{{content.id}}" checked>{{content.content}}</li>
{% endif %}
{% endfor %}
</ul>
<button type="submit" name="btn" value="save">Save</button>
<input type="text" name="new_content">
<button type="submit" name="btn" value="create">Create</button>
</form>
{% endblock %}
那是块内容中的代码。谁能想到，这一切都与h1的利润率有关。
出现此问题是因为某些 HTML 具有默认的 CSS 属性。例如，p标记默认 CSS 是
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
要解决您的问题，您可以将以下标记的margin-top设置为0
p, menu, ol, hr, figure, dl, blockquote, ul, h1, h2, h3, h4, h5, h6 {
margin-top: 0
}
请注意，所有提到的标记默认 CSS 属性margin-top设置为0