gpt4 book ai didi

css - 删除垂直空间 html

转载 作者:太空宇宙 更新时间:2023-11-04 13:59:55 25 4
gpt4 key购买 nike

这应该是一个简单的问题,但我一直没能找到答案。在创建单列 html/css 设计时,元素之间存在我无法解释的垂直多余空间。

空间出现在部分之间,可以通过将部分顶部边距设置为 -20px 来移动,但这种方法不是必需的。任何帮助将不胜感激。

代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
body {
padding:0;
background-color: #888888;
width:800;

margin-top:0;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
display:block;
vertical-align:0;
}

section {
display:block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;

padding-top:0;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;

background-color: #CCCCCC;
width:760px;
}

article {
margin:0;
padding:0;
background-color: #EEEEEE;
}
</style>
<title>Title</title>
</head>
<body>

<section>
<h2> Section 1 </h2>
<article>
<p> Text here.
</p>
</article>
</section>
<section>
<h2> Section 2 </h2>
<article>
<p> Text here.
</p>
</article>
</section>
</html>

最佳答案

此边距来自您浏览器的 h2 标题的默认 css(用户代理样式)。您可以通过将边距设置为零来摆脱它。

h2 {
margin-top: 0;
}

关于css - 删除垂直空间 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21589571/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com