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

Question

单击时我想将链接向下移动一点，但是当我尝试使用 :active state 执行此操作时，该按钮下方的所有内容也会移动一点。最简单的解决方法是什么（我不想过多地使用我的 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&top: 5px听起来是个好主意，但这也不起作用（按钮永远向下移动 1px :/）。

score 3 · Accepted Answer

这可能适合您的需求：

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

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

score 2 · Accepted Answer

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

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

更干净，更少的代码并且不太可能影响您的布局的其余部分，从而改善您网站的面向未来的能力。

Margin 移动元素框本身，其中 position relative 将元素的框留在它所在的位置，但将元素从文档流中取出，允许它在任何你想要的地方移动，而不会影响其他任何东西。

score 1 · Accepted Answer

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

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

relative 的定位基本上是说“您可以在页面上将这个元素移动到任何你想要的位置，但空间将保持在元素最初所在的位置。” 该链接的默认定位是静态的，这意味着它遵循正常的元素流。所以如果你把边距往下移5px，那么它下面的一切都会改变

score 0 · Accepted Answer

您可以将其包装a在 a 中div，然后给该 div 一个指定的高度，同时也给出a绝对定位。

见下文：

4 回答 4