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?
18 Replies
Here is a codepen with the problem: https://codepen.io/BravoLima2k4/pen/PogzbyY
What gap do you mean? There is a margin on the body, right?
https://codepen.io/Ghloo/pen/rNbLmYm
The gap property for flex and grid. And on my actual project I nuked the margins
I know, thought you meant it more broadly. I see no suspect gap in the pen. After nullifying the body margin it looks ok to me in my pen fork.
This is the gap I mean, and this is it in chrome dev tools. You can see a hatch box denoting a gap on both sides of the button
no gap on the right for me.
browsers used for testing (mobile):
- firefox
- chrome
- kiwi
- opera
- samsung internet
In the pen, there is a "Subscribe" button (seee my pen link), which works good in FF, Chrome and Vivaldi.
looks the same for me with OP's codepen link
was referring to OP's screenshot and using OP's link
https://media.discordapp.net/attachments/1217114440902901871/1217160475700232243/Screenshot_2024-03-12_171855.png?ex=66030407&is=65f08f07&hm=e8a2ba7fa3faeba21a5e336bb01ca7024de566e324216cb997e2bfb0a5016e75&
from firefox mobile
looks the same in all browsers i tested.
no idea how to troubleshoot this if the problem doesn't even exist on my end...
You meaan in the pen or in a live website?
It's LastPass causing the problem
It inserts an element to create the icon, and because the parent is
display: flex, it's creating a new column, and so there is an extra gap
It's just lazy coding on LastPass. They give it a
width and height of 0, so that it shouldn't impact layouts, but it's still there, and in the dom, so if it's 0x0, it exists, and so is a flex child and gets it's own columnah, the icon was my suspicion as well, because it's missing in the pen but visible in the screenshot.
i thought it maybe was a pseudo element and the code wasn't provided.
but that lastpass thing is just silly smh
Yep, disabling the extension fixes it. Are there any ways that you know to fix it without turning off the extension?
You could try styling the
[data-lastpass-icon-root], but it might simply break the icon completely. It's hard, because the position: relative is both inline, and !important...
yup, but because LastPass is injecting an element (as you can see in the screenshot), that element is creating a new column of content. The element is 0x0, but it's there, so it creates a 0px wide column, but that also means there's now an extra gap