• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Div Container in Div Containern

lvlanson

Neues Mitglied
Hey Leute,
ich versuche gerade eine kleine Testseite mit HTML, CSS und Javascript zu bauen.

Bisher habe ich nur HTML und CSS implementiert.

Meine Frage bezieht sich auf folgendes:

Ich habe zwei Div Container die jeweils eine Klasse an Div Containern beinhalten (class="box). Dabei verhalten sich die "Boxen" innerhalb der großen Divcontainer (= Rahmen) unterschiedlich. In dem einen sind Zwischenräume zwischen den Boxen und in dem anderen sind keine Zwischenräume. Ich verstehe nicht warum das so ist und wie ich die Zwischenräume entfernt bekomme.

Über Hinweise würde ich mich sehr freuen. Hier ist mein Quellcode:
HTML:
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <title>Intel 4917 Emulator UNSW 1917 Higher Computing</title>
    </head>
    <body>
        <div id="register">
            <div id="IP" class="box">
                <p>IP</p>
            </div>
            <div id="IS" class="box">
                <p>IS</p>
            </div>
            <div id="R0" class="box">
                <p>R0</p>
            </div>
            <div id="R1" class="box">
                <p>R1</p>
            </div>
        </div>
        <div id="case">
            <div id="0" class="box">
                <p>0</p>
            </div>
            <div id="1" class="box">
                <p>1</p>
            </div>
            <div id="2" class="box">
                <p>2</p>
            </div>
            <div id="3" class="box">
                <p>3</p>
            </div>
            <div id="4" class="box">
                <p>4</p>
            </div>
            <div id="5" class="box">
                <p>5</p>
            </div>
            <div id="6" class="box">
                <p>6</p>
            </div>
            <div id="7" class="box">
                <p>7</p>
            </div>
            <div id="8" class="box">
                <p>8</p>
            </div>
            <div id="9" class="box">
                <p>9</p>
            </div>
            <div id="10" class="box">
                <p>10</p>
            </div>
            <div id="11" class="box">
                <p>11</p>
            </div>
            <div id="12" class="box">
                <p>12</p>
            </div>
            <div id="13" class="box">
                <p>13</p>
            </div>
            <div id="14" class="box">
                <p>14</p>
            </div>
            <div id="15" class="box">
                <p>15</p>
            </div>
        </div>
    </body>
</html>
CSS:
body {
    background-color: dimgrey;
}
p{
    display: table-cell;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    width: 100px;
    font-family: Verdana, Geneva, sans-serif;
}

#register{
    border: 2px solid black;
    width: 102px;
    float: left;
    margin: 0 0 0 250px;
}

#case {
    border: 2px solid black;
    width: 420px;
    margin: 80px auto;
    height: 420px;
}

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightgrey;
    border: 1px solid black;
    margin: 0;
}
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Code:
#case {
border: 2px solid black;
width: 408px;
margin: 80px auto;
height: 408px;
}

.box {
 float:left;
width: 100px;
height: 100px;
background-color: lightgrey;
border: 1px solid black;
margin: 0;
}

Und das P-Element brauch kein display:table-cell.
 
Werbung:
Hallo! Danke für die zahlreichen Kommentare. Das mit dem display:table-cell ist beim Ausprobieren in Unkenntnis dieses Parameters entstanden.

Und danke für die Erklärung des <!doctype html> tags, die Funktion dessen war mir bislang nicht bekannt.

Leider verstehe ich immer noch nicht, warum die Zwischenräume zwischen den Boxen im Case Div Container entstehen. Ich würde mich sehr freuen, wenn einer eine gute Erklärung dazu hätte.

Ich möchte euch trotzdem schon Mal danken für die Hinweise zu meinen doch nicht unbedingt wenigen Fehlern, die ich eingebaut hatte.

Freundliche Grüße,
Thomas :)
 
Leider verstehe ich immer noch nicht, warum die Zwischenräume zwischen den Boxen im Case Div Container entstehen. Ich würde mich sehr freuen, wenn einer eine gute Erklärung dazu hätte.
Die Urache ist display:inline-block für .box, was zur Folge hat, dass alle Elemente mit dieser CSS-Klasse einem HTML-Inline-Element entsprechend im Textfluss einen Leerraum (whitespace) zum Nachbarelement erzeugen.
 
Werbung:
Die Urache ist display:inline-block für .box, was zur Folge hat, dass alle Elemente mit dieser CSS-Klasse einem HTML-Inline-Element entsprechend im Textfluss einen Leerraum (whitespace) zum Nachbarelement erzeugen.
Spaßeshalber eine Gegenprobe mit display:block gefällig? :D

https://jsfiddle.net/SpiceLab/yh0aL62c/
Ah danke, das ist eine großartige Erklärung. Okay ich habe jetzt einfach so gefixt:


HTML:
.box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightgrey;
    border: 1px solid black;
    margin: 0;
}

Jetzt noch zu dem Thema:

HTML:
p{
    display: table-cell;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    width: 100px;
    font-family: Verdana, Geneva, sans-serif;
}

Was könnte ich denn statt table-cell nehmen? Auch wenn es jetzt bezüglich der logischen Hierarchie keinen Sinn macht, funktioniert es von den display Elementen am besten.

Das Ziel war, dass der Text der Zelle in der absoluten Mitte sitzt und nicht nur die äußere Ecke des Paragraphen Elementes in der Mitte angelegt wird.
 
Werbung:
Was für <p> entfällt und hinzukommt, damit line-height:100px zur vertikalen Zentrierung seines Inhalts greift: https://jsfiddle.net/SpiceLab/jLh7a2h3/

Also mit margin: 0; ist das sozusagen auch gelöst. Es ist sehr interessant zu sehen, dass die font-size die margin beeinflusst. Also font-size = margin-top im Prinzip.

Auch interessant ist, dass table-cell dieses Problem auch irgendwie gelöst hat, wobei die Sideeffects davon mir noch unklar sind.
 
Zurück
Oben