负差不能再减了
负差不能再减了
提问于 2016-02-18 10:19:02
我正在使用各种css属性来查看它们是如何工作的。我的问题是，为什么当我设置“利润率最高”时，比-20便士更负，我的链接不再向上移动。设置更多负值，如-21 at及以上，根本不会将链接更多地移到顶部。
<!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>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-02-18 10:39:27
对于内联(内联块)元素，它们似乎不会超出其高度(不能说/找出原因)，因此，如果您更改的填充大于20 as，则可能会有同样大的负值。
但是，如果确实将锚点更改为块级元素，则负边距将正确应用。
样本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>
Stack Overflow用户
发布于 2016-02-18 10:37:16
它永远不会变得更消极，因为有一个h1标记，它上面没有任何空格来做边距。
您必须使用position:absolute;使a标记自由移动。
Stack Overflow用户
发布于 2016-02-18 10:47:53
示例中的所有元素都有所谓的“正常流”。流中的第一个元素是<h1>，它是块元素，它占据整个可用宽度并使行中断。当你使用负的margin-top时，你会看到上面的元素。20px of padding是元素的可用负margin。要走出“正常流”，可以使用position: absolute。要在流中停留，可以使用position: relative，也可以使用top: -21px;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35478658
复制相关文章
相似问题
腾讯云开发者
