Achieving full child div coverage within a bordered parent div on Chrome

I am encountering an issue where I am trying to insert an image into a bordered div, but in Chrome 96.0 there are unexpected margins appearing from the top and left that I cannot seem to remove.

Below is the code I am using:

.wrapper {
  width: 36px;
  height: 36px;
  border: solid 2px red;
  padding: 0;
}

.img {
  width: 100%;
  height: 100%;
  background: green;
  margin: 0;
}
<div class="wrapper">
  <div class="img"></div>
</div>

Here is what I am observing:

https://i.sstatic.net/6WGg9.png

This is what my friend sees when viewing the page in Safari:

https://i.sstatic.net/smsmQ.png

javascripthtmlcss

Answer №1

It seems like the issue is related to rounding:
This becomes evident when adjusting zoom levels.

To address this, a workaround is to apply inset shadow on the wrapper:

.wrapper {
  width: 36px;
  height: 36px;
  border: solid 2px red;
  padding: 0;
}

.img {
  width: 100%;
  height: 100%;
  background: green;
  margin: 0;
}

.shadow{
  /* Adding inset shadow to fill white gaps */
  box-shadow: 0px 0px 2px 1px red inset;
 }
Normal output:
<div class="wrapper">
  <div class="img"></div>
</div>
<br>
With inset shadow:
<div class="wrapper shadow">
  <div class="img"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React - Issue with Material-UI radio button group not filling button upon clicking

I've been working on an app using React and incorporating Material-UI components. In a specific section of the interface, there are four options that users can toggle between with radio buttons. Despite setting up the rendering correctly, I encountere ...

javascriptreactjsradio-buttonmaterial-uiradio-group

Vertically align the left div in the center, while maintaining the standard alignment of the right div

I have been experimenting with Bootstrap 4 and attempting to implement the Vertical alignment feature as outlined on the webpage: https://getbootstrap.com/docs/4.0/layout/grid/ Despite reviewing my code multiple times, I am unable to identify the mistake ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

javascriptjqueryhtmlcss

Trigger the opening of a class or window upon pressing the button

Good evening, I'm attempting to create a functionality where pressing a specific button will open a window. However, I am unsure of how to achieve this using CSS classes. My initial thought was to add a new class in the CSS file and call it every ti ...

javascripthtmlcss

Tips for utilizing Variant on an overridden component using as props in ChakraUI

I created a custom Component that can be re-rendered as another component using the BoxProps: export function Label ({ children, ...boxProps }: BoxProps) { return ( <Box {...boxProps}> {children} </Box> ); } It functio ...

javascripttypescriptchakra-ui

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Utilizing the power of SimpleHTMLDom to retrieve high-resolution images through an advanced Google search

I want to display a large image that was retrieved from Google using simple_html_dom.php include_once( "simple_html_dom.php" ); $key="unique"; $html = new simple_html_dom(); $html=file_get_html('http://images.google.com/images?as ...

phphtmldom

Enhancing user engagement with PDF files using AngularJS to create an interactive and captivating page-turn

Anyone familiar with how to achieve a page turner effect for PDF files using Angular? I'm open to jQuery solutions as well. I've come across turn.js, which uses HTML, but I'm specifically looking for a way to implement this effect with PDF f ...

javascriptjqueryangularjs

Permitting the user to remove an option from the antd select widget

I have integrated the antd select component in my React application and I am looking to add a delete option for users. For more details, please refer to the image below:https://i.sstatic.net/ZP4PP.png This is how I attempted to implement it: {tasks.map( ...

cssreactjsselectantd

What is the best way to keep my layout component fixed in the Next13 app directory?

I am struggling to develop a custom layout component that can retrieve its own data. Despite adding 'cache: 'force-cache'' to the fetch function, the updated content from my CMS is still being loaded every time I refresh the page. Below ...

javascriptreactjsnext.jsserver-side-renderingapp-folder

Newbie's Dilemma: Issues with Html, Email, and Distribution Lists

I am looking to add a new feature to my website where users can enter their email address to receive a free promotion and be added to an announcement list. Since I don't have any experience with web programming, I'm not sure where to start. Would ...

htmldatabase

Disable the function when the mouse is moved off or released

My custom scrolling implementation in a ticker using Jquery is due to the fact that standard scrolling doesn't function well with existing CSS animations. The goal is to enable movement of the ticker when clicking and dragging on the controller, a div ...

javascriptjquerymouseeventmouseup

Sophisticated method for arranging three integers in javascript in descending order, followed by analyzing their relative distances

In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...

javascriptjquerysortingcompare

Utilizing the map function to modify the attributes of objects within an array

I have a data structure with unique IDs and corresponding status keys. My goal is to count how many times each status repeats itself. Here's an example of my data structure: const items = { id: 2, status_a: 1, status_b: 1, status_c: 3 }; Below is the ...

javascriptreactjs

What is the best way to eliminate products that have already been utilized?

Take a look at my code snippet. $(function() { $("#tags input").on({ focusout: function() { var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters if (txt) $("<span/& ...

javascriptjqueryhtmlcssautocomplete

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Tips for transmitting form information in a fetch call

As I was developing a nodejs server, I encountered an issue with the POST call that involves sending form input data to a remote server. Despite everything else working fine, the form data was not being received by the server. Below is the code snippet in ...

javascriptnode.jsfetch

I encountered an issue while operating my next.js application which utilizes solidity smart contracts. The error message "Cannot read properties of undefined" was displayed during the process

While working on my next.js app and attempting to fetch user data, I encountered the "cannot read properties of undefined" error. https://i.stack.imgur.com/SBPBf.png I also received the following error in the console https://i.stack.imgur.com/JBtbO.png ...

javascriptnext.jssolidityethers.jsdecentralized-applications

Is Typescript familiar with the import -> require syntax, but unfamiliar with the require -> import syntax?

My code includes a simple file that utilizes the ES6 module loader: 1.ts import {foo} from "./2" foo('hello'); 2.ts function foo (a){console.log(a);}; export {foo} When the tsconfig is configured as follows: "module": "commonjs", We can o ...

javascriptnode.jstypescriptes6-modules

Can someone provide guidance on how to send serialized data using a jQuery.getScript() request?

Is it feasible to make a request for an external JS file while simultaneously sending serialized data in that same request? I want to provide some values to validate the request, but without including those values in the request URL. Upon receiving the po ...

javascriptjqueryajax