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:
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: