Issues with border-box and content-box when styling a datepicker header-CodePudding

I am trying to style what is to become a datepicker. The issue is that my header does not seem to fully allign with its container, so that there is some space between the header and the container border:

I know this is probably some nitty gritty detail I am missing out on, but maybe somebody can help me find it:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <div >
        <div >
            <div >
            </div>
        </div>
    </div>

</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: white;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar {
    color: black;
    background-color: white;

    width: 45rem; 
    height: 46.4rem; 
    border: 2px solid black;
    box-sizing: content-box; 

    position: relative;
}

.calendar__header {
    color: white;
    background-color: black;
    width: 100%;
    height: 10rem; 
    padding: 0 2rem; 
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

What is very strange for me is that the behaviour seems to differ on whether I am displaying the result on my 27'' monitor or on my notebook. I cannot see this gap on my monitor, but it is quite obvious on my notebook.

CodePudding user response：

This is a known issue that was introduced in Chromium when they revamped the algorithm that deals with fractional pixels. Don't expect this to be fixed any time soon. Currently the only way to fix it is working with fixed pixel widths, to guarantee that no fractional pixel values are being computed.

The reason you're seeing this on your hi dpi notebook screen is exactly that - a CSS pixel is being represented by more than one physical pixel, resulting in a different rendered result than on your 27" monitor, which I assume you are running at the full physical resolution.

CodePudding user response：

You could instead use box-shadow like this:

* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: white;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar {
    color: black;
    background-color: white;

    width: 45rem; 
    height: 46.4rem; 
/*     border: 2px solid black; */
    box-shadow:inset  0 0 0  5px #000;
    box-sizing: content-box; 

    position: relative;
}

.calendar__header {
    color: white;
    background-color: black;
    width: 100%;
    height: 10rem; 
    padding: 0 2rem; 
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

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