Margin discrepancies when using em units

Currently, I am utilizing an em-based margin for items within a menu that are homogeneous in terms of markup, class, and id. It appears that the margins for each of these items should be rendered the same. However, some are displaying as 1px while others are showing as 2px. There may be a pattern to this discrepancy, such as every second item being rendered as 2px, but I am unable to discern one.

This rendering behavior has been noticed in both Firefox and Chrome on Linux and OS X.

My assumption is that this issue arises from the calculated value of these margins being a decimal number (e.g. 1.6px according to Chrome DevTools), but it is unclear why the same decimal number is not consistently rendered.

Below is a link to a codepen example, as well as an enlarged screenshot depicting the problem.

http://codepen.io/anon/pen/KoAbl

htmlcss

Answer №1

Just a thought, but perhaps it rounds to the nearest whole pixel (1.6 => 2), and then adjusts for that rounding in the subsequent padding. For instance, if the previous padding was 0.4 pixels too much, the next padding would be 1.6 - 0.4 = 1.2 pixels, which rounds to 1 pixel.

The following calculation would then be 1.6 + 0.2, resulting in 1.8, which rounds to 2. Subsequently, 1.6 - 0.2 equals 1.4, rounded down to 1. The pattern continues with 1.6 + 0.4 = 2, completing the cycle.

Based on this reasoning, the sequence of paddings would be 2px, 1px, 2px, 1px, 2px (repeated) 2px, 1px, 2px, 1px, 2px, which appears to match the paddings you are experiencing.

Answer №2

The exact calculation of em's remains a mystery to me. However, it seems to be related to the rounding of the font-size. If you adjust the font-size to 10px or 20px, the inconsistency disappears. But as soon as you set it to 15px, the issue resurfaces.

You can find more information on this topic in the following post: CSS: Em rounding error

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

Animated CSS Checkmark Design

How can I create an animated Check-mark using CSS with SVG animation? I attempted the following code but it doesn't seem to be working. Any suggestions? DEMO: https://jsfiddle.net/b7Ln0jns/ CSS: @import "bourbon"; $color--green: #7ac142; $curve: c ...

javascriptjqueryhtmlcss

Image hover effect displayed when hovering over an image

Is it possible to create a hover effect using purely CSS when hovering over an image, like in this example: https://i.sstatic.net/jjAWm.jpg I've come across several similar examples online, but they all seem to rely on jquery or javascript. I'm ...

htmlcss

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this? https://i.sstatic.net/NNuy7.png This is the HTML code snippet: < ...

cssangularngx-pagination

Hilarious rendering glitch with CSS in IE where the background image inexplicably contains the style "display: block."

Encountering a curious issue with how IE is interpreting my css. The defined style includes "background-image: url(/images/leftArrow.png); DISPLAY: block; cursor: pointer;" However, IE 7 & 8 seem to be merging background and display as one property (r ...

htmlcssinternet-explorerstyles

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

"Enhance your website design with a navbar that seamlessly blends with the background color

Question 1: I have a requirement for my navbar to affix overlay on top of the background color and image of the div (top-banner). Currently, when I scroll down, the background color overlays my navbar affix instead. How can I ensure that my navbar sta ...

jqueryhtmlcsstwitter-bootstrap

Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working? HTML: <div class="bgVideoWrap"> <video id="bgVideo" loop="true" aut ...

csshtml

Creating a split-view menu in WinJS: A step-by-step guide

I'm attempting to create a versatile app using JavaScript. I followed a tutorial on the MSDN website, but for some reason, the "nav-commands" class isn't displaying when the splitview is opened. I have set closedDisplayMode = 'none'. & ...

javascripthtmlwin-universal-appwinjs

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox

Utilizing Material-UI CssBaseline with React JS

Looking to enhance the consistency of my new React app with a sleek design using Material-UI. Want it to be easy to maintain, so decided to start with the default theme. Trying out cssBaseline from Material-UI but running into issues. Not very familiar wit ...

cssreactjsmaterial-ui

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

Fancybox 2 - CSS styles vanish when using Ajax request

I have a fancybox2 with static dummy content that has styling applied. It works fine, but now I need to load dynamic content via ajax. However, when I make the ajax call, the required content loads but loses all css styling, most likely due to changes in t ...

jqueryhtmlcssajaxfancybox-2

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

cssruby-on-railsreactjsweb-applicationsstyled-components

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

javascriptjqueryhtmlimage

Python script utilizing Selenium is returning an empty string when trying to extract data from

When I try to retrieve the value from a dynamically loading table by clicking on the TD element, it works fine. However, when I attempt to fetch the text from the same TD element, it returns an empty string despite trying XPATH and CSS Selector methods. H ...

pythonhtmlseleniumselenium-webdriver

Vue 3 throws an error stating: "An uncaught DOMException occurred because the string contains an invalid character."

Exploring the capabilities of vue.js on a basic website. The setup consists of a single index.html file and all JavaScript is housed in an index.js file. The website is a work in progress, but there are no blockers preventing the JavaScript functionality ...

javascripthtmlvue.jsvuejs3

Ways to perfectly position a bootstrap well in the center

https://i.sstatic.net/b3g46.pnghttps://i.sstatic.net/osPzb.png Having trouble aligning this image with the center of the page. It should be a straightforward task, but for some reason, I can't seem to get it right. ...

csstwitter-bootstrap

The jQuery .load method is having trouble loading a local HTML file within a Cocoa WebView

Having an issue with my Cocoa WebView where I'm attempting to load a local HTML file using jQuery.load(). My code snippet looks like this: $("#mydiv").load("test.html"); // The test.html file is located within the app's bundle Although no exce ...

javascriptjqueryhtmlmacoscocoa

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

javascriptjqueryhtmlweb