title: How to solve the unwanted effect of writing the HTML on different lines?
body: <p>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.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          .crate {
              margin-right: 3px;
              margin-bottom: -2px;
              width: 100px;
              height: 60px;
              border: 1px solid silver;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h3&gt;Exp_Mockup&lt;/h3&gt;
      &lt;hr /&gt;
      &lt;!-- HTML 1 (is not perfect, pretty html) --&gt;
      &lt;div&gt;
          &lt;canvas id=&quot;canvas-title&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;canvas id=&quot;canvas-index-header&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;header-0&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;header-1&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;header-2&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;header-3&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;canvas id=&quot;canvas-index-track&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;track-0&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;track-1&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;track-2&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
          &lt;canvas id=&quot;track-3&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;canvas id=&quot;canvas-footer&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      
      &lt;!-- HTML 2 (single line, perfect, ugly marckup) --&gt;
      &lt;div&gt;&lt;canvas id=&quot;canvas-title&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
      &lt;div&gt;&lt;canvas id=&quot;canvas-index-header&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;header-0&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas
              id=&quot;header-1&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;header-2&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;header-3&quot;
              class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
      &lt;div&gt;&lt;canvas id=&quot;canvas-index-track&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;track-0&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas
              id=&quot;track-1&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;track-2&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;canvas id=&quot;track-3&quot;
              class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
      &lt;div&gt;&lt;canvas id=&quot;canvas-footer&quot; class=&quot;crate&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hMop1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hMop1.png" alt="Sample" /></a></p>
  <blockquote>
  <p>I expect the same result without having different CSS. It is the model, the rest is worked in code.</p>
  </blockquote>