Ссылка CSS: активное состояние и маржа перемещаются весь сайт

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 & top: 5px звучит как хорошая идея, но это не работает, либо (кнопка перемещается 1px вниз навсегда: /).

http://jsfiddle.net/JyZLF/

Answer 1

Это может удовлетворить ваши потребности:

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

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

http://jsfiddle.net/JyZLF/3/

Answer 2

Вы можете обернуть a в div, а затем дать, что Див заданную высоту, в то же время давая a абсолютное позиционирование.

смотри ниже:

http://jsfiddle.net/8P93R/1/

Answer 3

лично, я бы не использовать запас для этого, я хотел бы использовать:

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

http://jsfiddle.net/seemly/jFrCj/1/

Намного чище, меньше кода и меньше вероятно, повлияет на остальную часть вашего макета, улучшая будущую защиту вашего сайта.

Margin перемещает сам элементный элемент, где в качестве позиционного элемента появляется поле элемента, в котором оно находится, но выводит элемент из потока документа, позволяя перемещать его в любом месте, не требуя чего-либо другого.

Answer 4

Вы можете добавить position:relative в a, а затем в a:active, смените его на top:5px. Так что ваш код будет выглядеть

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

http://jsfiddle.net/JyZLF/7/

позиционирование относительно в основном говорит: «Вы можете переместить этот элемент туда, куда вы хотите на странице, но пространство будет оставаться там, где элемент изначально сидел.» Ссылка имела статическое положение по умолчанию, что означает, что это следует в нормальном потоке элементов. Поэтому, если вы переместили маржу вниз 5px, тогда все под ней изменится.