Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13861, member: 3917"]
Das liegt daran, dass ein p-Element oben und unten ein margin bzw. Außenabstand hat. Verwende statt dessen <span>, dabei ist das nicht der Fall.

Da diese Elemente in der selben Spalte stehen, kannst Du ihnen eine gemeinsame Klasse zuweisen:
[CODE]        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
[/CODE]
Dann brauchst Du die Spalte nur ein Mal festzulegen:
[CODE]        .item {
            grid-column: 2;
            border: 1px solid black;
            text-align: center;
            padding-top: 2;
        }

.item1 {
            grid-row: 1;
        }

.item2 {
            grid-row: 2;
        }
        /* usw. */[/CODE]

Weitere Hinweise zur Vereinfachung:
Es hat sehr den Anschein, dass das linke Feld bei Haus und Art jeweils ein Label für den Wert im rechten Feld ist. In dem Fall kannst Du beide zusammen fassen:
[CODE]        <div class="haus haus1">
            <span class="label">Haus</span>
            <span class="data" id="test1"></span>
        </div>
[/CODE]
Dann kannst Du über die Klassen .label und . data das Aussehen und die Ausrichtung für alle gemeinsam fest legen. Und weil .haus und .art jeweils in der selben Spalte liegen, jeweils diese nur ein Mal festzulegen.
Weiter kannst Du auf die Leerspalten verzichten, wenn Du statt dessen die Anweisung "column-gap" verwendest.
Und ich würde es hübscher finden wenn die Inhalte alle sowohl horizontal als auch vertikal zentriert wären, das lässt sich sehr gut mit Flexlayout machen:
[CODE].Table span, .Table .item {
    display: flex;
    align-items: center;
    justify-content: center;
}[/CODE]
[/QUOTE]

Authentifizierung