Menu
Community /Pin to ProfileBookmark
@cootheadOct 05.2020 — #Hi there JMRKER,
here is the solution and the answer all in one...
[i]coothead[/i]@cootheadOct 05.2020 — #Hi there JMRKER,
I normally use a [i]search engine[/i]. :)
Here are two useful sheets...
...that I found a couple of minutes ago,
[i]coothead[/i]
Vertical gap between DIV vs PRE using css grid. Why?
I asked this question on another site and have had zero responses. Is it such a bad question?
Anyway, I thought I would try here for at least a look at my question.
The only intended difference between the grid displays in the following are the use of DIV versus PRE tags.
I don’t understand why there is a large vertical gap between the displays.
Not a major problem, just would like to know why the difference or where it is coming from.
`<!DOCTYPE html><html lang=”en”><head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, user-scalable=yes”/>
<title>css Simple Grid compare</title>
<!– From:
see also:
see also:
see also:
–>
<style>
.grid {
display: grid; /* auto-fill is the same */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 4px;
}
.Ditem { border: 1px solid blue; }
.Pitem { border: 1px solid blue; white-space: pre-wrap;
}
</style>
</head><body>
<h2>Grid – DIV</h2>
<div class=”grid”>
<div class=”Ditem”>Product 1 <br>
This contains a longer number of words within the item.
</div>
<div class=”Ditem”>Product 2</div>
<div class=”Ditem”>Product 3</div>
<div class=”Ditem”>Product 4</div>
<div class=”Ditem”>Product 5</div>
<div class=”Ditem”>Product 6</div>
<div class=”Ditem”>Product 7 – no vertical gap!</div>
</div>
<h2>Grid – PRE</h2>
<div class=”grid”>
<pre class=”Pitem”>Product A <br>
This contains a longer number of words within the item.
</pre>
<pre class=”Pitem”>Product B</pre>
<pre class=”Pitem”>Product C</pre>
<pre class=”Pitem”>Product D</pre>
<pre class=”Ditem”>Product E</pre>
<pre class=”Ditem”>Product F</pre>
<pre class=”Pitem”>Product G – why such a large vertical gap?</pre>
</div>
</body></html>`
Sign in
to post a comment5 Comments(s) ↴
0
@cootheadOct 05.2020 — #Hi there JMRKER,here is the solution and the answer all in one...
<i>
</i>.grid pre {
margin: 0;
}
[i]coothead[/i]
0
@cootheadOct 05.2020 — #Hi there JMRKER,>[color=#069]Where do you guys fine this obscure information[/color]
I normally use a [i]search engine[/i]. :)
Here are two useful sheets...
...that I found a couple of minutes ago,
[i]coothead[/i]