Как сделать input похожим на a?

Question

[Ignatiy2]

В верстке я профан, не смог могу корректно сформулировать вопрос. У меня есть такой класс:

.btn {
    background-color: transparent; 
    border-radius: 5px;
    font-size: 17px;
    padding: 7px 12px;
    border: 2px solid #7915AB;
    color: #FFFFFF;
    transition: opacity .1s linear;
    cursor: pointer;
}

И когда я задаю его к input либо к ссылке, их размеры учитываются по-разному:

У ссылки

У input


Элементы находятся внутри header, у которого есть свой padding. Как будто бы, в случае с ссылкой отступы не входят в размер элемента, а у input входят.

Comments

[Ankhena]

Выложите код в песочницу jsfiddle.net
Так, чтобы была видна проблема.

[Ignatiy2]

Ankhena, с ссылкой - https://jsfiddle.net/bw8opu0q/ с input - https://jsfiddle.net/u1p3fo7m/

[Ankhena]

Ignatiy2,
жжжуть

ну да ладно, по порядку
1. Не вижу разницы https://jsfiddle.net/fneoum5y/
2. nav это основная навигация страницы, не обязательно, но хорошо бы одна.
3. Если вам нужна кнопка, то лучше использовать button, а не input. Стилизовать проще. Да и по семантике разумнее.
4. Для submit нужна форма form. Но у вас не форма, значит type точно не submit.

[Ignatiy2]

Ankhena, попробуйте убрать input, header станет уже, в этом все и дело. Спасибо за замечание о nav, буду иметь ввиду. А насчет кнопок, мне как раз таки и нужен submit для формы, просто я не стал это в примере показывать.

[Ankhena]

Ignatiy2,

попробуйте убрать input, header станет уже, в этом все и дело.

Ну логично.
У строчных и блочных элементов отступы работают по-разному.
Будет одинаковый display будут рисоваться одинаково.

мне как раз таки и нужен submit для формы

Тогда это <button type="submit">text</button>

[Ignatiy2]

Ankhena, я пытался выставлять разные display, у меня не ничего не выходило. Получить нужный результат удалось лишь так:

<button type="submit">
    <a class="btn">Logout</a>
</button>

Но мне кажется использовать это не очень хорошо, компилятор visual studio даже ругается "Элемент "a" нельзя вложить в элемент "button"", хотя странно, вроде у меня все работает.

[Ankhena]

Ignatiy2, да вы что творите?
Я не предлагала ссылки вкладывать в кнопки.
Это запрещено.

[Ignatiy2]

Ankhena, но ведь если сделать просто кнопку, то того результата который мне нужен не будет. Что же тогда делать?

[Ankhena]

Ignatiy2,

то того результата который мне нужен не будет. Что же тогда делать?

Какого того?
Будет легче, если вопрос будет сформулирован сразу весь и максимально чётко.

[Ignatiy2]

Ankhena, мне нужно, чтобы отступы у input работали также как отступы у ссылки. Я не хочу чтобы при добавлении input с классом btn header менял свои размеры. Так будет более наглядней: https://jsfiddle.net/tzLbqa62/ (a) https://jsfiddle.net/f2g4183y/ (input)

[Ankhena]

Ignatiy2, вы можете компенсировать отрицательными margin или уменьшить padding у header__inner

чтобы отступы у input работали также как отступы у ссылки

Они станут работать одинаково, если вы зададите ссылке inline-block. Тогда именно у ссылки отступы станут работать правильно. А не так как сейчас.

Сейчас вы задаете padding для инлайновой ссылки, но для инлайновых элементов padding'и живут своей жизнью и не влияют на окружение. Поэтому, расчет высоты header__inner велся от шрифта ссылки.

Отправлять форму ссылкой это даже не костыли, это верх неразумности, про профессионализм промолчу.

Т.е. правильный путь:
- использовать тег button, а не a или input
- уменьшить отступ у родителя

Ведь в форме будут и поля для ввода, потом вы с большой долей вероятности сделаете ее флексом и дочерние получат display block.

[Ignatiy2]

Ankhena, спасибо. Теперь все встало на свои места.

Answer 1

[Lord_Dantes]

Если вам нужна ссылка, так сделайте ссылкой элемент.

Answer 2

[Арсений Матыцин]

1. Display:inline-block.
2. Поиграйся с lineheight;
3. Поиграйся с документацией в сторону -webkit-appearance.