I am trying to understand and test absolute length measurements by making a ruler that should show 1 cm wide major divs, with 1 mm wide minor divs with the half way mark being a little taller. But it's all too wide. Note: my point is not how I can draw such a ruler better, my point is to understand where the error comes from, why those are too wide? I don't think it's the width of my little tick lines. The millimeter distance is clearly too wide in the white area, regardless of the tick-line. What am I doing wrong?
div {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.ruler {
counter-reset: major minor;
width: 10cm;
white-space: nowrap;
}
div.major::after {
counter-increment: major
}
div.major {
width: 1cm;
height: 5mm;
text-align: left;
content: open-quote counter(major) "bla";
border-left: 1px solid black;
display: inline-block;
}
div.minor {
width: 1mm;
height: 1mm;
border-right: 1px solid black;
display: inline-block;
}
div.half {
height: 2mm;
}<html>
<head>
<title>Screen Geometry and Gestures</title>
</head>
<body>
<main>
<h1>Screen Geometry and Gestures</h1>
<section>
<h2>Length Units</h2>
<p>Let's make a ruler!</p>
<div >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</section>
</main>
</body>
</html>CodePudding user response：
It is something to do with the element type and the display attribute, display-inline. That setting seems to add additional space. When switching to span, the space is gone.
You could change the display to display: inline; and use margin instead of width or change the element type.
Also include this in your minor class: box-sizing: border-box;.
CodePudding user response：
I found the definitive reason for the issue. It is inline-block is for text, and the odd whitespace handling of HTML causes the extra spaces.
In XML there is such a thing as ignorable whitespace, i.e., every space between a tag's ">" and an the next tag's "<" is ignorable white space, while space in text nodes, i.e., if there is any text between ">" and "<", such space is not ignored, i.e., newlines, tabs, spaces, they are all part of the text node. This makes a lot of sense, and would make more sense even for HTML (whether or not whitespace is actually displayed or displayed after (in XSLT) normalize-space(text()), that is a whole different questions.
So in HTML including in the browser's DOM all white space remains. Hence document.firstChild is often some empty space or newline text node and you need to do document.firstElementChild to skip over that.
People often struggle in HTML to get rid of white space, and I ran into that trap.
So, what happens is that that space was added between my 's. I don't know if that is not added with , my memory tells me that it is. But the solution is to either make sure that there is no space, e.g. by:
<div><
div><
div><!--
--><div>
or another trick is to set CSS font-size: 0.
div {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.ruler {
counter-reset: major -1;
width: 10cm;
white-space: nowrap;
font-size: 0;
}
div.number::after {
content: counter(major);
counter-increment: major;
font-size: 3mm;
}
div.major {
width: calc(1cm - 1px);
height: 5mm;
text-align: left;
border-left: 1px solid black;
display: inline-block;
font-size: 0;
}
div.minor {
width: calc(1mm - 1px);
height: 1mm;
border-right: 1px solid black;
display: inline-block;
}
div.half {
height: 2mm;
}<html>
<head>
<title>Screen Geometry and Gestures</title>
</head>
<body>
<main>
<h1>Screen Geometry and Gestures</h1>
<section>
<h2>Length Units</h2>
<p>Let's make a ruler!</p>
<div >
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<script type="text/javascript">
const self = document.currentScript;
const div = self.previousElementSibling;
for(let i = 0; i < 20; i ) {
const newdiv = div.cloneNode(true);
self.parentElement.insertBefore(newdiv, self);
}
</script>
<div ></div>
</div>
</section>
</main>
</body>
</html>