Wie fällt dieser HTML5 -Ziegelstein herunter? ⇐ HTML

[Anonymous]

Ich habe ein Beispiel -JSFIDDLE vorbereitet, um das Problem anzuzeigen, mit dem ich gerade mit meinem Layout konfrontiert bin: Wenn ich einen Inhalt dynamisch in ein bestimmtes Element (den Ziegelstein) einfüge, sinkt das Element zusammen mit seinem Elternteil auf eine Weise, die über mein Verständnis von HTML/CSS liegt. Wenn ich den Inhalt entferne, wird das ursprüngliche Layout wiederhergestellt, es sei denn, ich verwende Chrome ... dann würde es seine Position behalten und wieder fallen, wenn ein neuer Inhalt eingefügt wird. Ich frage mich, woher der obige Rand (ist es?) Stammt. < /P>

Hier ist ein vollständiges HTML5



HTML5 Falling Brick - What is this?

#brick {
background-color: lightgray;
border: solid black medium;
border-radius: 1em;
color: red;
font-size: 2em;
height: 100%;
text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }




Click me twice















< /code>

update < /h1>

Nachdem meine Frage erneut gelesen wurde. Ich merke, dass es den falschen Eindruck erwähnen kann, dass das, was ich tatsächlich zu erreichen versuche, einige HTML zu fixieren. Das Beispiel mit dem Ziegel ist nur eine lustige Demo des Problems, die ich beobachte.>