Höhe von Grid-Zellen

[Miriam]

Hello,
ich habe folgendes versucht
CSS:

main {  
  display: grid;  
  grid-template-columns: auto;  
  border: dotted 5px green;  
}  
  
div {  
  display: grid;  
  grid-template-columns: repeat(3, max-content);  
  gap: 1em;  
  justify-self: center;  
  border: dotted 2px yellow;  
}  
  
p {  
  border: 2px solid black;  
}  

HTML:

<main>  
<div>  
<p>  
Preis:  
</p>  
<p>  
100  
</p>  
<p>  
Euro  
</p>  
</div>  
</main>  

Result:

Wie entferne ich die Zeilen über und unter dem Text?

[Mr.Murphy]

Wenn du die Abstände zwischen den schwarzen Rahmen der p-Elemente und dem grün-gepunkteten Rahmen meinst: Das sind oben und unten die Außenabstände (margin) der p-Elmente oben und unten.

Die musst du verkleinern oder auf Null setzen.

[Miriam]

That's it!

Danke

[Henry]

Hallo Miriam,

That's it!

nur so als Anregung, du möchtest offensichtlich eine Art Gewinnbanner/Coupon erstellen. Sieht aber im Moment, na ja sagen wir mal, nostalgisch aus. Daher vielleicht als Inspiration, schau das mal bitte.

Gruss
Henry