CSS链接：活动状态和边距移动整个站点

我想点击链接时稍微移动一下，但是当我尝试使用：活动状态时，该按钮下面的所有内容都会移动一点。最简单的解决方法是什么（我不想和我的HTML代码混淆得太多，所以可能与CSS有关？）。CSS链接：活动状态和边距移动整个站点

HTML：

<a href="#">Test</a> 
<p>This paragraph moves when I click button above. I want to prevent that.</p>

CSS：

a { display: inline-block; } 
a:active { margin: 5px 0 0 0; }

position:relative & top: 5px听起来是个好主意，但是这并不工作，要么（按钮移动1像素向下永远：/）。

这可能满足您的需求：

a { 
    display: inline-block; 
    margin: 0 0 5px 0; 
} 

a:active { 
    margin: 5px 0 0 0; 
}

2013-02-13 22:06:25

我是个白痴，太棒了！ :) – Wordpressor 2013-02-13 22:10:35

与此相关的问题是，在点击链接之前，它正在将所有内容都移动到下面。所以它仍然在做同样的事情。就在你点击它之前 – 2013-02-13 22:58:23

这就是为什么我把“可能适合你的需要”而不是“解决方案”; P – 2013-02-14 00:02:58

你可以在div包住a然后给该分区指定的高度，同时也给了a绝对定位。

见下图：

2013-02-13 22:08:39 braican

这根本不起作用......链接位于文本之上。 – 2013-02-13 22:09:38

我的错误，我没有在链接之前更新jsfiddle。上面的小提琴正确地代表了我的建议。 – braican 2013-02-13 22:14:32

啊，删除了downvote。 :)如果不是您添加的额外标记，我会加注。 – 2013-02-13 22:16:37

个人而言，我不会用保证金对于这一点，我会用：

a:active { 
    position:relative; 
    top:5px; 
}

更清洁，更少的代码少可能会影响您的其他布局，从而改善您网站的未来发展。

边距移动元素框本身，其中位置相对离开它所在元素的框，但将元素从文档流中移出，允许它在任何你想要的位置移动而不影响其他任何东西。

2013-02-13 22:17:29 seemly

您可以将position:relative添加到a，然后在a:active中将其更改为top:5px。所以，你的代码看起来像

a{display:inline-block; position:relative;} 
a:active{top:5px;}

相对的定位基本上说：“你可以将这个元素，无论你想在页面上，但空间会留在原来元素坐。”该链接有一个静态的默认位置，这意味着它遵循正常的元素流。所以，如果您将保证金下降到5px，那么它下面的所有内容都将变为

2013-02-13 22:17:33

回答