Как убрать зазор между button и border?

Question

[LaCosteGreen]

Никак не убирается зазор между кнопкой "Сброс" и рамкой справа. Как прижать кнопку к рамке?
https://codepen.io/LaCosteGreen/pen/wvYWjvX

Answer 1

[PolarOne]

Немного по другому сделайте.

.fastSearch input {
    width: 600px;
    padding: 10px;
    font-size: 20px;
    /* border: none; */
    border: 3px solid #0073C6;
    border-radius: 20px 0px 0px 20px;
}

button.fastSearchButtonReset {
    border-radius: 0px 20px 20px 0px;
}

.fastSearch {
    display: flex;
    width: 750px;
    height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    /* border: 3px solid #0073C6; */
    /* border-radius: 20px; */
    overflow: hidden;
}

Замените \ добавьте стили. У формы убрать бордер вообще. Добавить его инпуту, но убрать с правой стороны. А кнопке ресет, на оборот, добавить с правой стороны.

Comments

[PolarOne]

да, прерывается бордер между кнопками, можно обыграть - добавить разрыв и между инпутом с кнопкой

.fastSearch input {
    border-right: 0px;
}

.fastSearch .fastSearchButton {
    border-left: 1px solid white;
}

button.fastSearchButtonReset {
    border-left: 1px solid white;
}

Или попробовать... ну наверное кнопки в div обернуть и ужеему задать бордер снизу и сверху.

А вообще погуглив нашел эту статью, возможно поможет если не хотите переделать малость.

[LaCosteGreen]

Большое спасибо! Переверстать как вариант... Я просто думал может есть какая-то особенность почему так происходит..