Strange gap between element and border on chrome

I noticed some strange spacing between the div borders and elements when I wrapped a few divs inside a container. This issue is only happening on Chrome and Edge, while Mozilla seems to display it correctly.

My code includes the usage of Bootstrap along with some custom CSS:

.fullScreen {
  height: 100vh;
  width: 100vw;
}

.mainContainer {
  align-items: center;
  justify-content: flex-start;
}

.row {
  margin: 0!important;
}

#box {
  margin: 0 0 0 5vh;
  height: 90vh;
  width: 90vh;
}

.rowEndings {
  height: 36vh;
}

.rowMid {
  height: 18vh;
}

@media (orientation: portrait) {
  .mainContainer {
    align-items: flex-start;
    justify-content: center;
  }
}
<!-- adding bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<html lang="en" class="fullScreen">

<body class="fullScreen">
  <div class="mainContainer row fullScreen">
    <div id="box" class="border border-dark">

      <div class="row rowEndings border border-dark"></div>

      <div class="row rowMid border border-dark"></div>

      <div class="row rowEndings border border-dark"></div>

    </div>
  </div>
</body>

</html>

Although the alignment appears perfect in the snippet, there seems to be unwanted space for me. Here are some screenshots showcasing the issue:

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

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

After ruling out padding and margin as the cause, any guidance would be greatly appreciated :)

UPDATE : The problem persists in Edge as well, but removing the 5vh margin from the #box element resolves the issue.

htmlcsscross-browserspacingborder-spacing

Answer №1

I encountered a similar issue with gaps between content and borders, particularly on Edge and Chrome which are both WebKit based browsers. Interestingly, I did not experience this problem on Firefox. It appears to be an underlying issue within the WebKit engine.

To mitigate this problem, I opted to avoid using traditional borders. Instead, I utilized

filter: dropshadow(0px 0px 0px 2px black);
box-shadow: 0px 0px 0px 2px black;

These styles resolved the gap problem, but introduced new challenges if box-sizing: border-box; is set.

filter: dropshadow( inset 0px 0px 0px 2px black);

This approach led to two additional issues:

  1. The box shadow interfered with the box sizing, causing overlap with content.
  2. The shadows were placed beneath the element, rendering them invisible.

To address these complications, one could either use a ::before pseudo-element for the shadow or encapsulate the element within a div container with the shadow applied. The latter method allows for adding padding to simulate borders (shadows) and ensures proper alignment of the element within the container.

Answer №2

It has come to my attention that Chrome may insert unwanted spacing between the border and content when the Zoom setting is not at 100%. Therefore, it is important to ensure that your Chrome Zoom level is indeed set to 100%.

To adjust on Windows: Press Ctrl and + to zoom in or Ctrl and - to zoom out.

On Mac: Press ⌘ and + to zoom in or ⌘ and - to zoom out.

Answer №3

Make sure to include the !important rule in your CSS.

* {
  margin: 0!important;
  padding: 0!important;
}

Answer №4

To avoid browser default CSS styles causing issues on your page, it's recommended to include a reset in your CSS file. For example, browsers like Chrome may apply user agent styles that can interfere with your design:

body {
    display: block;
    margin: 8px;
}

You can add the following code at the beginning of your CSS file or in a separate file to reset these styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

For best practices, consider using a well-known CSS reset file like Normalize.CSS from . This ensures consistency in styling across different browsers by resetting the default styles provided by browser user agents.

Answer №5

Experiment with a CSS reset:

within your Cascading Style Sheets:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

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

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

javascriptcss

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

javascriptcssangularbootstrap-4flexbox

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

csstwitter-bootstrapgoogle-chrome-devtools

Using AngularJS to bind to the 'src' property of an <img> tag

There is a table on my website with numerous rows, and each row contains a preview image that should appear in the top right corner when the mouse hovers over it. I attempted to insert an image tag with AngularJS binding for the URL in the src attribute l ...

javascripthtmlangularjsimagebrowser

What causes certain images to have unspecified height and width measurements?

Currently, I am in the process of extracting image sizes from a website using a module called scraperjs. Most images have their height and width attributes defined, but some do not, resulting in the returned value being "undefined". How can I retrieve the ...

javascriptjqueryhtmlnode.jsimage

Experience unique website functionalities across Windows/Android and Apple ecosystems

Apologies for any language errors in advance. I'm facing an issue where my website appears differently on Safari or Chrome on iOS/MacOS compared to Windows 10 or Android devices. If you observe the List of Receiving Countries in the images provided: ...

cssreactjsweb

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

javascriptcssangularjspopup

If an element with a "hidden" display property is loaded in the browser window, will it be visible?

Is an element in a hidden display still using memory when the page is loaded? It's convenient to have many elements on a page, but if 99 elements are hidden and only 1 is displayed, does that impact the loading of the page? I'm curious if the pa ...

javascriptcss

Exploring the differences between translate3d and matrix in CSS 3 animations

Lately, my projects have demanded seamless transitions and animations. We've made the shift from using Javascript to CSS animations almost entirely. I've discovered that utilizing translate3d produces incredibly smooth animations on various devi ...

csscss-animationscss-transformstranslate3d

Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json: "tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css", However, I encountered the ...

cssjsonnpmtailwind-css

Ensuring Consistent Headings While Scrolling

Imagine having headings structured like this: <h1 class="fixontop">heading 1</h1> content goes here. . . . long paragraph. <h1 class="fixontop">heading 2</h1> 2nd content goes here. . . . long paragraph. <h1 class="fixontop"> ...

javascriptjquerycss

Struggling to add a line break in my code

class Test extends React.Component{ state={name: "John", numTimes: 2}; render() { let output = "" for (let i = 1; i <= this.state.numTimes; i++) { let evenOdd = i % 2 if (evenOdd === 0) { output += i + ". Hello " + this.state.name + ...

javascripthtmlcssreactjsjsx

When the click event occurs, add a class. After a delay using a timeout function, remove the added

I am currently using Jimdo and I have a section where I can edit all the codes, which is working fine except for one feature. Any assistance would be greatly appreciated! Here is the code that adds a class to an animated SVG image with its status set as d ...

javascriptjqueryhtmlcss

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Issues arise when attempting to utilize jQuery to print a string once a button is pressed

I am trying to display a string on the webpage when the user clicks a button. Below is the HTML code: <p> <h1 class="text-center" id="notif"> </h1> </p> Here is the relevant part of the script: $("#btn_My").click(functio ...

javascriptjqueryhtml

Arrange floating elements in a three-column layout

Can anyone help me with a CSS solution to make boxes with different heights stack underneath each other neatly, similar to Tetris? Here's my code: CSS #page .equipeBox{ float:left; width:280px; padding:10px; margin:10px; backgro ...

htmlcsscss-float

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

What is the most efficient method to match a list of titles with a distinct list of their associated links using Beautiful Soup 4 (bs

Update: I've found the solution! list_c = [[x, y] for x, y in zip(titleList, linkList)] Initial inquiry: In my project to scrape a recipe website using bs4, I encountered a challenge where the titles and links were not directly paired. After extracti ...

pythonhtmlbeautifulsouphyperlink

What causes block elements to act like inline elements?

:target { border: 2px solid #D4D4D4; background-color: #e5eecc; } .navigation li { list-style-type: none; float: left; padding: 1em; } <ul class="navigation"> <li> <a href="#help"> Help </a> </li> <li> & ...

htmlcsscss-float