0

I'm trying to make a really simple coverage report using the most basic html and css. Here's what I have so far:

pre div {
  background-color: green;
  display: block;
}
<pre>
  <code>
<div>Option Explicit</div>
Sub HelloWorld()
    Debug.Print("Hello World")
End Sub
  </code>
</pre>

This works OK, but the div tag seems to add some white space between the line which contains Option Explicit and the line containing Sub HelloWorld. I do not want this.

Why is the div element adding this whitespace and how can I remove it?

Roy
  • 7,811
  • 4
  • 24
  • 47
user32882
  • 5,094
  • 5
  • 43
  • 82
  • inside `pre` all the spaces counts so you see what you write – Temani Afif Oct 31 '21 at 14:43
  • So why is it that if I replace the `div` with a `span` the whitespace disappears? – user32882 Oct 31 '21 at 14:43
  • because div is a block element and you aren't allowed to have block inside inline element (code) to start with – Temani Afif Oct 31 '21 at 14:44
  • add border to the code element and read the duplicate to understand what is happening – Temani Afif Oct 31 '21 at 14:45
  • Ok, I had a look at the duplicate and I understand that `div` is a block element, so putting that inside the `code` (which is an inline element) is bad practice. However, I still need to find a way to shade the entire line. Therefore I don't think this question is a duplicate of the one provided. – user32882 Nov 01 '21 at 07:33

1 Answers1

0

Change to: display: inline-block;
Add: width: 100%; to keep the background-color at 100% width

pre div {
  background-color: green;
  display: inline-block;
  width: 100%;
}
<pre>
<code>
<div>Option Explicit</div>
Sub HelloWorld()
    Debug.Print("Hello World")
End Sub
</code>
</pre>
001
  • 2,019
  • 4
  • 22
  • I need the entire line to be shaded with the background color from one end of the window to the other. This code only shades the background of `Option Explicit` – user32882 Nov 01 '21 at 07:32
  • Because the *selector* is `pre div`, if you tried `pre { background-color: green; }` then it'll style the `pre` element including `Sub Hello World()...` till `End Sub`, if that what you are asking for. – 001 Nov 01 '21 at 17:21