Dies ist, was ich derzeit haben: https://jsfiddle.net/xdzadbo0/4/Div nicht nach oben Körper erstreckt
Wie Sie die div-Container an die Spitze nicht erstreckt sich sehen können. Es scheint, dass es wichtig ist, margin: 0; und padding: 0; auf alles zu haben. Dadurch bekomme ich die Breite bis zum Rand, aber ich habe immer noch nicht die Spitze bis ganz nach oben.
Wie könnte ich das tun?
Das Problem, das bei Ihnen auftritt, ist auf das margin-Set auf dem h1-Tag zurückzuführen.
Sehen Sie diese jsfiddle
Alles, was ich tat in den CSS die folgende war:
#container h1 {
margin-top: 0;
}
Sie sind fantastisch! Ich hatte nicht einmal an das h1-Tag gedacht. Ich werde nach Ablauf der 10 Minuten akzeptieren. – Thomas
@Tomas könnten Sie ein '' container' 'hinzufügen. Auf diese Weise bricht der Rand von 'h1' nicht aus dem Elternelement aus. Kann nützlich sein, wenn Sie den oberen Rand der 'h1' behalten möchten. – hungerstar
Einige Elemente Standardwerte haben. Sie können dies beheben, indem Sie diese Werte entfernen.
* {
margin: 0;
padding: 0;
}
Die HTML-Überschriften hat Standardränder und Polsterungen, weshalb scheint es nicht an die Spitze erstreckt werden. Geben Sie diesen Code in der Kopfzeile:
h1, h2{
margin: 0px;
padding: 0px;
}
Ich hoffe, dass helfen.
Genau dies in Ihrem CSS hinzufügen
h1
{
margin:0;
}
Sie einen clearfix zu #container hinzufügen könnte. Auf diese Weise bricht der Rand von h1 nicht aus dem Elternelement aus. Kann nützlich sein, wenn Sie den oberen Rand des h1 behalten möchten.
html {
margin: 0;
padding: 0;
}
body {
background-color: #aaaaaa;
margin: 0;
padding: 0;
}
#container {
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}<div id="container" class="cf">
<h1>Title</h1>
<h2>Welcome</h2>
</div>sah ich Ihr Problem und ich habe erfahren, dass, wenn ich zum ersten Mal wurde auch ausgehend.
Zuallererst sind die Antworten aller anderen korrekt und nützlich. Ich wollte nur etwas hinzufügen, das dir bei zukünftigen Projekten helfen kann.
Wie Sie wahrscheinlich schon wissen, nicht alle Browser sehen Dinge (Code) die EXAKT gleiche Art und Weise von einander ... die gefürchteten "Cross-Browser-Inkompatibilität" Albtraum.
In zukünftigen Projekten würde ich empfehlen, zu Beginn Ihres CSS-Codes einen "Browser-Reset" einzufügen. Dies ermöglicht es Ihnen, ein Level-Playing-Field zu haben, damit die Dinge so erscheinen, wie Sie es vorhaben.
Ein kleiner Code-Schnipsel, die Gabriel Bica in eine der Antworten über geteilt ist:
* {
padding: 0;
margin: 0;
}
, die gut funktioniert! Was ich jedoch gerne benutze, deckt etwas mehr Boden ab und hat mir sehr geholfen.Dieser Code ist:
/* ========== Browser Reset ========== */
html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
height: 100%;
}
Es ist offensichtlich mehr Code, aber wenn man an der Spitze Ihrer CSS-Dateien setzt, dass es wirklich die Art von Problem zu beseitigen helfen Sie unter anderem erfahren kann, dass manchmal Stumpf eine Person. Kurz gesagt, alles, was es macht, ist im Grunde, die lästigeren Browser-Standardeinstellungen loszuwerden, so dass Sie eine viel höhere Wahrscheinlichkeit der gleichen sichtbaren Ergebnisse auf einem Browser als die anderen Browser da draußen haben können.
Hoffe, dass hilft!
Shenole
h1 hat einige webkit Marge.
Titel
– tech2017