在你说这是一个重复之前 我试过了margin-top：0px;
<html>
<head>
<style>
html, body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
top: 200px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title"><h1>60 Second Science!</h1><cat class="indent">Molecules of Solids, Liquids and Gases</cat></div>
<img src="SLGM.png" class="slgm">
<div class="txt1"><h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br><h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br><h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2"><h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>
因此，当我运行此代码时，带有“txt2”类的div在顶部有一堆空格。有人可以帮忙吗？我也尝试删除顶部的填充，重写代码等。我很快就需要这样做，所以任何响应都有帮助！
：d
答案 0 :(得分：0)
问题是，您的div.txt2有规则top: 200px，这可以解释额外的高度。我已将此更改为top: 30px以匹配我示例中其他<div>的高度。
另请注意，您的许多元素都有几百个像素的固定width。这不会在移动设备上进行扩展，您应该考虑使用基于百分比的值。
<html>
<head>
<style>
html,
body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
/*top: 200px;*/
top: 30px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title">
<h1>60 Second Science!</h1>
<cat class="indent">Molecules of Solids, Liquids and Gases</cat>
</div>
<img src="SLGM.png" class="slgm">
<div class="txt1">
<h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br>
<h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br>
<h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2">
<h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>