I'm implementing a project where I put a button in the input using the CSS position property, everything works fine, even I have no problem in responsive mode, coincidentally I want to zoom - check some content, I realized that when I zoom in or out there is a gap between the top or bottom of the input, and at certain sizes there is no gap, everything is fine, I use rem for all my CSS properties , because as far as I know rem can be zoomed through the viewport and this zooming in or out is related to the viewport size, so logically if I Using rem, there shouldn't be any gaps when I zoom out or zoom in, but there are!
I even changed the units from rem to PX (recommended in another question similar to mine), still the same problem, I'm in a different Checked it on browsers, every browser has this problem but their behavior and the gap they create at different zoom sizes are different. Additionally, I don't have any issues responding to breakpoints or sizes, everything works fine.
Relationship between viewport and zoom in or out based on MDN:
zooms in.
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_conceptsRelationship between
viewport and rem:
https://blog.hubspot.com/website/css-rem#:~:text=Rem (short for “root-,1rem will also equal% 2016 pixels.
So the question is: Because multiple browsers behave differently, does this button get repositioned due to zooming in or out, has something to do with browser structure or programming, or is it just something else, and what's the logic behind it?
/*Default Adjustments*/
:root {
--color-secondary: #00acc1;
--color-accent: #F86F03;
--color-body: #212121;
--color-text: #FBFFDC;
--colorButton: #847f7d;
--colorBorder: #A8A196;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
*,
::placeholder {
color: var(--color-text);
}
html {
font-size: 10px;
}
body {
font-family: "Inter", arial, helvetica, sans-serif;
font-size: 1.5rem;
line-height: 1.5;
background: var(--color-body);
}
.btn {
background: var(--colorButton);
border: .1rem solid var(--colorBorder);
border-radius: .3rem;
}
/*Basic divs*/
.adjust {
display: flex;
justify-content: center;
}
.whole {
background: var(--color-secondary);
padding: 1.5rem;
border-radius: 0.6rem;
margin-top: 2rem;
}
.add {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 1.3rem;
}
.addButton {
position: absolute;
cursor: pointer;
top: 0.27rem;
right: 8rem;
font-size: 1.3rem;
border: 0;
border-radius: 0 .3rem .3rem 0;
background: var(--colorButton);
}
.add input {
outline: none;
text-indent: 0.5rem;
font-size: 1.3rem;
background: var(--colorBorder);
border: .3rem solid var(--colorButton);
border-radius: .5rem;
}
.add input::placeholder {
font-size: 1.25rem;
}
<div class="adjust">
<div class="whole">
<form class="add">
<input class="addBook" type="text" required maxlength="50" pattern="\S(.*\S)?" title="Your book name can't start or end with white space and should include at least
1 non-white space character" placeholder="e.g Harry Potter" name="" id="" />
<button class=" btn addButton">Add</button>
</form>
</div>
</div>
image:
This is 100% scaled size, everything is fineThis is 90% of the scaled size with a gap at the top
This is 80% of the zoomed size and everything is back to normal again!
The same result occurs in Zooming-in, so if this problem is related to my code, why is it not constant in each zoom size, if it is not related to my code, what is happening behind the scenes What?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think this has to do with absolute positioning, I've experienced it before. However, to solve this problem, you can add a wrapper around the button, which is a flexbox.
.wrapper { height: 100%; width: fit-content; padding: .3rem 0; position: absolute; top: 0; right: 0; float: left; border-radius: 0 .3rem .3rem 0; display: flex; /*To keep item centered so gap will not appear*/ align-items: center; } .addButton { font-size: 1.3rem; border: 0; background: var(--colorButton); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; cursor: pointer; }