Изменение заполнения кнопок сдвигает другие элементы вниз?

Question

Изменение заполнения кнопок сдвигает другие элементы вниз?

0

Я пытался создать кнопку в CSS, которая, похоже, выглядит "нажатой" на :active, для этого я добавил 2px в padding-top и вычитал 2px из padding-bottom. Однако, похоже, это добавляет преимущество для других элементов, хотя я не могу понять, почему.

Я уверен, что решение является простым для опытных пользователей CSS.

http://jsfiddle.net/hTTWq/

Marco Scannadinari 17 апр. 2014, в 11:26

Источник

Теги:

html

css

button

mouseevent

stylesheet

2 ответа

0

Многие способы сделать это, но чтобы переместить всю кнопку (а не только текст), вы можете сделать что-то подобное, что изменяет margin-top, а не padding:

*:active, *:focus {
    outline: none;
}
button {
    display: inline-block;
    margin: 0;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #a9a9a9;
    color: #fff;
    overflow: hidden;
    transition: padding-top 100ms linear, padding-bottom 100ms linear, box-shadow 100ms linear, -webkit-filter 100ms linear;
    vertical-align: top;
}
button.suggested {
    background-color: #0074d9;
}
button:active {
    -webkit-filter: brightness(0.5);
    margin-top: 2px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.5) inset;
    vertical-align: bottom;
}

ralph.m 17 апр. 2014, в 07:55

Ещё вопросы

Paulie_D · Accepted Answer · 2014-04-17T06-19-00.000Z

Вы используете inline-block на кнопках, выравнивание по умолчанию которых является "базовым".

Попытайтесь изменить это, добавив это в свой Buttton CSS

vertical-align: top; /* or middle or bottom */

Демо-версия JSfiddle

затем при изменении верхнего и нижнего отступов базовая линия изменяется соответственно, и поэтому другая кнопка смещается. в то время как vertical-align:top по vertical-align:top или vertical-align:middle не будет изменена путем регулировки отступов (изменяется только путем регулировки height ).