html - 初学者 html/css : Why does my webpage distort when I comment out the universal borders?

Question

目前我只是在玩弄 HTML/CSS，目前我的目标是将我的表格移动到页面的顶部中央。当我打开通用边框时，我可以将它移动到我想要的位置，但是一旦我将其注释掉，表格就会跳到别处!

body {
  background-image: url("https://images.freecreatives.com/wp-content/uploads/2016/04/Triangle-Shiny-Modern-Background-.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

* {
  border: 2px solid black;
}

* #move {
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.profile {
  font-family: Verdana, Arial, serif;
  font-size: 20px;
  width: 15%;
  float: left;
}

iframe {
  float: right;
  width: 30%;
  height: 1%;
  margin-right: 10px;
}

form {
  clear: left;
}

#nav ul {
  text-align: center;
  margin: auto;
  position: relative;
}

#nav li {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  border-radius: 2px;
  background-color: white;
  padding: 5px;
  font-family: Cursive;
}

#times table {
  width: 10%;
  height: 10%;
  margin-top: -600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/*table {
    		margin-left:auto;
    		margin-right:auto;
    	}*/

td {
  border: 1px solid black;
}

<div id="nav">
  <ul>
    <li>Home</li>
    <li>Store</li>
    <li>About me</li>
    <li>Contact</li>
  </ul>
</div>
<img id="move" src="https://scontent.xx.fbcdn.net/v/t1.0-9/16425751_1848826525393050_4826825314980823096_n.jpg?oh=1228198713ee79012631342e3bb4b650&oe=596D7646" width="300" height="300" align="left">
<div class="profile">
  <h2>Samuel Wu</h2>
  <p>Age: 24</p>
  <p>Sex: Male</p>
  <p>Height: 5'7</p>

</div>

<iframe width="320" height="200" src="https://www.youtube.com/embed/zCUlm9F-P9E?ecver=1" frameborder="0" allowfullscreen></iframe>

<form>
  <h3> What do you think about Samuel Wu?</h3>
  <input type="text" value="just fk me up fam">
  <p>Did you answer honestly?<input type="checkbox"></p>
  <h3>How well do you think you know Samuel Wu?</h3>
  <p>What is his favorite color?</p>
  <select>
      		<option>red</option>
      		<option>blue</option>
      		<option>green</option>
      	</select>
  <p><input type="submit" value="$5 to submit"></p>
</form>
<div id="times">
  <table>
    <thead>
      <tr>
        <th>x</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <th>2</th>
        <td>2</td>
        <td>4</td>
        <td>6</td>
      </tr>
      <tr>
        <th>3</th>
        <td>3</td>
        <td>6</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

那是因为您给每个元素都设置了边框，这些边框会产生额外的空间并会挤压其他元素。除非您真的打算在所有内容上使用边框，否则最好的办法是调整 table 的 margin 值，仅使用要使用的边框，或者不使用边框完全没有。

如果你评论/删除边框，你可以调整 #times table 的负 margin-top 到像 550px 这样的东西，它应该定位该表与设置所有边框时非常相似。

无边框:

有边框:

避免负边距顶部的替代方法:

• 使用 position: absolute; 这将使 table 独立于其余元素流，并调整 top 和 留下对您有利的值(value)观:

例子: