Question

我希望在点击时将链接向下移动一点，但是当我尝试使用时：活动状态，该按钮下面的所有内容都会移动一点。什么是最容易解决的问题（我不想用我的HTML代码搞得太多，所以也许与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＆amp; top: 5px听起来不错，但这也不起作用（按钮永远向下移动1px：/）。

Answer 1

这可能符合您的需求：

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

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

Answer 2

个人而言，我不会使用保证金，我会使用：

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

更清洁，更少的代码，更不可能影响您的其余布局，从而改善您网站的面向未来。

边距移动元素框本身，其中位置相对离开元素的框，但是将元素从文档流中移出，允许将其移动到任何您想要的位置而不影响其他任何内容。 / p>

Answer 3

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

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

亲戚的定位基本上说“你可以在页面上的任何地方移动这个元素，但空间将保留在元素最初所在的位置。”该链接具有静态的默认定位，这意味着它遵循正常的元素流。因此，如果您将保证金向下移动5px，则其下方的所有内容都将更改

Answer 4

您可以将a包裹在div中，然后将该div赋予指定的高度，同时也提供a绝对定位。

见下文：