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

回答