Div elements inside Pre elements add undesirable whitespace above and below line

user_3783002 0
Viewed 42

I have the following HTML:

pre {}

div.uncovered {
  background-color: red;
}
<!doctype html>
<html>

<head>
  <title>Line numbering test</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <pre>
<div class="uncovered"><code>def f(a, b):</code></div>
<div><code>    return a+b</code></div>
    </pre>
</body>

</html>

I need to have div elements because I would like the background color to span the width of my entire browser window. However, the div element also adds whitespace between the code elements, which I do not want. I tried adjusting the margins and padding of the div element in my CSS to 0, but this had no effect. I also tried playing around with the white-space property of the div, some of the options (like nowrap) would remove the whitespace, but would also remove the spaces before my return statement, which is also not desirable.

I don't understand why div is adding this whitespace. Div is a block element and following the box model, all whitespace should be accounted for by either the margin or padding. Why is this happening, and how I can fix it?

css html
3 Answers

Pre can contain phrasing content i.e. not divs - you need to put the pre inside the divs

You need to reset all the elements (you can limit yourself to pre, code and div if needed

Here the <pre> is enough so we can remove the <code>

* { margin:0; padding:0;}
div.uncovered {
  background-color: red;
}
<!doctype html>
<html>

<head>
  <title>Line numbering test</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="uncovered"><pre>def f(a, b):</pre></div>
<div><pre>    return a+b</pre></div>
</body>

</html>

Perhaps better alternative

We can have the code tag AND assign white-space: pre to it. Then we have semantic and visual consistency

* { margin:0; padding:0;}
code { display:block; white-space: pre;}
code.uncovered {
  background-color: red;
}
<code class="uncovered">def f(a, b):</code>
<code>    if a &lt; b:
        return a+b
    else:    
        return b-a</code>

user_2957830

Please do not put nothing inside a CSS selector properties, e.g.:

pre {}

Next, negative padding values will not work, but margins will:

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: -20px; /* Will not work */
  margin: -20px;
  font-size: 8px;
  background: #f1f1f1;
  text-align: center;
}
<div class="box">You may not be able to see this box</div>
Finally, you can clean and fix the code.

div.uncovered {
  background-color: red;
}
code {
  margin: 0 !important;
  padding: 0;
  white-space: auto;
}
<!doctype html>
<html>

<head>
  <title>Line numbering test</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <pre>
    <div class="uncovered"><code>def f(a, b):</code></div>
    <code>&nbsp;&nbsp;&nbsp;&nbsp;return a+b</code>
  </pre>
</body>

</html>

In HTML avoid using more than one space because HTML will ignore the rest. I replaced (whitespace),
with the unicode alternative &nbsp;.

user_172029600

You can also apply display: block; + white-space: pre; and only use the <code> tag to achieve a similar result:

code {
  display: block;
  white-space: pre;
  /* for more space between lines  */
  /* margin-bottom: 10px;  */
}

code.uncovered {
  background-color: red;
}
<!DOCTYPE html>
<html>
<body>

  <code class="uncovered">def f(a, b):</code>
  <code>    if a > b:</code>
  <code>        return a - b</code>
  <code>    else:</code>
  <code>        return a + b</code>
  
</body>
</html>

user_171754410
Related