Question

在你说这是一个重复之前我试过了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

Answer 1

问题是，您的div.txt2有规则top: 200px，这可以解释额外的高度。我已将此更改为top: 30px以匹配我示例中其他<div>的高度。

另请注意，您的许多元素都有几百个像素的固定width。这不会在移动设备上进行扩展，您应该考虑使用基于百分比的值。

＆＃13;

<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>

＆＃13;

为什么我的div顶部有额外的空间？

1 个答案: