Question

我正在玩各种css属性，看看它们是如何工作的。我的问题是，为什么当我设置＆＃34; margin-top＆＃34;这比-20px更负面，我的链接不再向上移动。设置一个更负的值，如-21px及以上，根本不会将链接移到顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nav</title>
    <style>
        nav { /*height: 60px;*/ border: 2px solid black;}
        a {
            display: inline-block;
            text-decoration: none;
            background-color: lightgreen;
            color: grey;
            font-weight: bold;
            padding: 20px;
            border-bottom: 2px solid red;
            margin-top: -20px; /* more negative value doesn't move the link more to the top */
        }
    </style>
</head>
<body>
    <h1>Testing</h1>
    <nav>
        <a href="#">link 1</a>
    </nav>
    <p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>

Answer 1

对于内联（内联块）元素，它们似乎没有超出它们的高度（不能说/找到原因），所以如果你例如更改填充大于20px，你可以有一个负边距大

如果您确实将锚更改为块级元素，则负边距适用。

样本1 - 填充

nav { /*height: 60px;*/ border: 2px solid black;}
a {
  display: inline-block;
  text-decoration: none;
  background-color: lightgreen;
  color: grey;
  font-weight: bold;
  padding: 40px;
  border-bottom: 2px solid red;
  margin-top: -40px; /* more negative value doesn't move the link more to the top */
}

<h1>Testing</h1>
<nav>
  <a href="#">link 1</a>
</nav>
<p>some text so we can see how it is affected when setting various properties</p>

样本2 - 块元素

nav { /*height: 60px;*/ border: 2px solid black;}
a {
  display: block;
  text-decoration: none;
  background-color: lightgreen;
  color: grey;
  font-weight: bold;
  padding: 20px;
  border-bottom: 2px solid red;
  margin-top: -40px; /* more negative value doesn't move the link more to the top */
}

<h1>Testing</h1>
<nav>
  <a href="#">link 1</a>
</nav>
<p>some text so we can see how it is affected when setting various properties</p>

Answer 2

它永远不会变得更负面，因为有一个h1标签，它上面没有任何空格来做边距

您必须使用position:absolute;使a代码自由移动

Answer 3

示例中的所有元素都具有所谓的“正常流程”。流中的第一个元素是<h1>，它是块元素，它占据整个可用宽度并使换行符。当您使用否定margin-top时，您可以使用上面的元素。 20px的{{1}}是该元素的可用否定padding。要退出“正常流程”，您可以使用margin。要保持流程，您可以使用position: absolute，并使用position: relative。

负利润率不会更负面

3 个答案: