CSS keeps adding an unnecessary gap
Right, so I've made a div with an input and button.
Here is the CSS:
.subscribe-box {
background-color: var(--clr-light_2);
padding: 0.4rem;
border-radius: 100rem;
display: flex;
gap: 1rem;
width: min-content;
}
.subscribe-box input {
background-color: transparent;
border: 2px solid var(--clr-light_1);
border-radius: 100rem;
padding: 0.3rem;
}
.subscribe-box button {
border-radius: 100rem;
padding: 0.3rem;
background-color: var(--clr-primary);
border: none;
color: var(--clr-light_1);
}
Here is the markup:
<div class="subscribe-box">
<input type="email" placeholder="Email Address" />
<button>Subscribe</button>
</div>
The problem is that the gap is applied to both the left and right side of the button. Theoretically, as there are only 2 elements in the div, only the left-side gap should exist.
What could be causing this?
Here is the CSS:
.subscribe-box {
background-color: var(--clr-light_2);
padding: 0.4rem;
border-radius: 100rem;
display: flex;
gap: 1rem;
width: min-content;
}
.subscribe-box input {
background-color: transparent;
border: 2px solid var(--clr-light_1);
border-radius: 100rem;
padding: 0.3rem;
}
.subscribe-box button {
border-radius: 100rem;
padding: 0.3rem;
background-color: var(--clr-primary);
border: none;
color: var(--clr-light_1);
}
Here is the markup:
<div class="subscribe-box">
<input type="email" placeholder="Email Address" />
<button>Subscribe</button>
</div>
The problem is that the gap is applied to both the left and right side of the button. Theoretically, as there are only 2 elements in the div, only the left-side gap should exist.
What could be causing this?
