How to solve the unwanted effect of writing the HTML on different lines?

Question

In the image below you can see the same HTML block. In the first, the code is written clean, and easy to maintain. In the second it is a single line (the editor made its wrap), it is ugly and difficult to maintain. But, at first the result is imperfect. The second is the expected result. Being the same CSS, is it possible to somehow correct so that the result is accurate in HTML 1? Maybe with some extra CSS; I don't know much CSS, excuse me if the question is silly.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .crate {
            margin-right: 3px;
            margin-bottom: -2px;
            width: 100px;
            height: 60px;
            border: 1px solid silver;
        }
    </style>
</head>

<body>
    <h3>Exp_Mockup</h3>
    <hr />
    <!-- HTML 1 (is not perfect, pretty html) -->
    <div>
        <canvas id="canvas-title" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-index-header" class="crate"></canvas>
        <canvas id="header-0" class="crate"></canvas>
        <canvas id="header-1" class="crate"></canvas>
        <canvas id="header-2" class="crate"></canvas>
        <canvas id="header-3" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-index-track" class="crate"></canvas>
        <canvas id="track-0" class="crate"></canvas>
        <canvas id="track-1" class="crate"></canvas>
        <canvas id="track-2" class="crate"></canvas>
        <canvas id="track-3" class="crate"></canvas>
    </div>
    <div>
        <canvas id="canvas-footer" class="crate"></canvas>
    </div>
    <hr />
    
    <!-- HTML 2 (single line, perfect, ugly marckup) -->
    <div><canvas id="canvas-title" class="crate"></canvas></div>
    <div><canvas id="canvas-index-header" class="crate"></canvas><canvas id="header-0" class="crate"></canvas><canvas
            id="header-1" class="crate"></canvas><canvas id="header-2" class="crate"></canvas><canvas id="header-3"
            class="crate"></canvas></div>
    <div><canvas id="canvas-index-track" class="crate"></canvas><canvas id="track-0" class="crate"></canvas><canvas
            id="track-1" class="crate"></canvas><canvas id="track-2" class="crate"></canvas><canvas id="track-3"
            class="crate"></canvas></div>
    <div><canvas id="canvas-footer" class="crate"></canvas></div>
</body>

</html>

I expect the same result without having different CSS. It is the model, the rest is worked in code.

Spacing in the html file shouldn't matter, are you certain nothing else is going on? — chrispy, Dec 03 '21 at 03:25
You're right, theoretically it shouldn't matter, but look at my example, why is the result different? — Alexandra Danith Ansley, Dec 03 '21 at 03:31
Obsidian Age: I don't understand you well. I removed the HTML-2, and the result is the same — Alexandra Danith Ansley, Dec 03 '21 at 03:33
@Alexandra Danith Ansley, I'm not really good at html and css, but may be the canvas-title is the duplicate id that Obsidian Age is talking about? — Ivan Silkin, Dec 03 '21 at 03:39
Spacing in HTML absolutely does matter. Characters such as spaces and new lines can manifest visually, see: https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements — skyline3000, Dec 03 '21 at 03:42
@ObsidianAge Multiple IDs is not the culprit here, it's the spacing in the HTML. Browsers will style elements with the same ID just fine. — skyline3000, Dec 03 '21 at 03:49

score 1 · Answer 1 · answered Dec 03 '21 at 06:57

CSS mysteries. If the goal is for HTML-1 then:

.crate {
    margin-right: 2px;
    margin-bottom: 2px;
    width: 100px;
    height: 60px;
    border: 1px solid silver;
}
 
.single-line {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

Then,

<div class="single-line">
    <canvas id="canvas-title" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-index-header" class="crate"></canvas>
    <canvas id="header-0" class="crate"></canvas>
    <canvas id="header-1" class="crate"></canvas>
    <canvas id="header-2" class="crate"></canvas>
    <canvas id="header-3" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-index-track" class="crate"></canvas>
    <canvas id="track-0" class="crate"></canvas>
    <canvas id="track-1" class="crate"></canvas>
    <canvas id="track-2" class="crate"></canvas>
    <canvas id="track-3" class="crate"></canvas>
</div>
<div class="single-line">
    <canvas id="canvas-footer" class="crate"></canvas>
</div>

CSS is evil :_)

How to solve the unwanted effect of writing the HTML on different lines?

1 Answers1