Css 负边距可以'；不要变得更消极_Css

Css 负边距可以'；不要变得更消极

css

Css 负边距可以'；不要变得更消极,css,Css,我正在玩各种css属性，看看它们是如何工作的。我的问题是，为什么当我设置的“利润上限”比-20px更负时，我的链接不再向上移动。设置一个更负的值，如-21px或更高，根本不会将链接移动到顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nav</title> <style> na

我正在玩各种css属性，看看它们是如何工作的。我的问题是，为什么当我设置的“利润上限”比-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>


导航
导航{/*高度：60px；*/边框：2px纯黑；}
a{
显示：内联块；
文字装饰：无；
背景颜色：浅绿色；
颜色：灰色；
字体大小：粗体；
填充：20px；
底部边框：2倍纯红；
页边距顶部：-20px；/*更多负值不会将链接移动到顶部*/
}
测试
一些文本，以便我们可以看到在设置各种属性时它是如何受到影响的

它永远不会变得更负，因为有一个

h1

标签，上面没有任何空格来做边距

您必须使用

位置：绝对

要使

标记自由移动
对于内联（内联块）元素，它们似乎没有超出其高度（无法说明/查找原因），因此，如果将填充更改为大于20px，则可以将负边距设置为同样大
但是，如果确实将锚定更改为块级图元，则负边距将正确应用
示例1-填充

nav{/*高度：60px；*/边框：2px纯黑；}
a{
显示：内联块；
文字装饰：无；
背景颜色：浅绿色；
颜色：灰色；
字体大小：粗体；
填充：40px；
底部边框：2倍纯红；
页边距顶部：-40px；/*更多负值不会将链接移动到顶部*/
}
测试
一些文本，以便我们可以看到在设置各种属性时它是如何受到影响的
示例中的所有元素都具有所谓的“正常流”。流中的第一个元素是
，它是块元素，它占据了整个可用宽度并使换行。当您使用负数边距顶部时，您将转到上面的元素20px
ofpadding
是元素可用的负边距。要退出“正常流量”，可以使用位置：绝对。要保持在流程中，您可以使用位置：relative
，并使用top:-21px
这可能与行高度计算或与内联块有关的内容有关，或两者都有关系。请注意，您正在处理一个内联块。如果你增加a
的行高，你只能得到一些额外的金额来增加你的负边距。文本似乎需要与nav
的边框齐平。但我不能说我完全理解内联块中的文本在这种情况下是如何工作的。