Miriam: Höhe von Grid-Zellen

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?

  1. 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.

    1. That's it!

      Danke

      1. 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

        --
        Meine Meinung zu DSGVO & Co:
        „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“