padding/margin-bottom funktioniert nicht, ich möchte verstehen, warum

Habe ich ein header-element in ein header-div, aber für einige Grund, warum ich kann nicht scheinen, hinzuzufügen, bottom margin oder padding zu. Margin/padding top, left und right arbeiten finden jedoch. gibt es einen Grund für dieses? hier ist mein code.

html

<div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

css

#Container {

position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

/----------------------------------------/

#Header {

position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {

font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}
  • Gut, header ist ein Interessantes element, die dieses einzigartige Ränder beim Rendern von Browsern. Dies kann führt zu unerwünschten Platzierungen die meisten Zeiten und nicht reaktiv, um die gewünschten Positionierungen. Ich habe nicht testen Sie Ihren code, aber dies vielleicht einer der Gründe. Versuchen Sie, geben Sie Ihren code mit "code-snippet" - tool, um uns zu erlauben zu bewerten, das problem deutlicher. Auch Sie vermissen ein # vor Container id - Selektor.
  • oh, ich glaube nicht, dass ich kopiert das # ich wollte nicht alles kopieren, so dass ich einfach in den code, den ich dachte, war relevant. ich fand es einfach seltsam, ich könnte meinen Kopf nach unten aber nicht nach oben. ist es etwas zu tun mit der Höhe des div-container?
  • Ja. Auch ist es über -sagen wir- "Natur" der rendering-header-tag. Es ist gerendert mit einigen "natürlichen" oberen Rand.
InformationsquelleAutor Sai | 2014-11-20
  1. 3

    Ich würde vermeiden, mit position styling wie, dass; es neigt, sich einzumischen, mit der Art, wie block-Elemente miteinander interagieren. Basierend auf den styles und markup zur Verfügung gestellt, ich sehe keinen Grund, warum padding/margin würde nicht funktionieren, aber dein Beispiel hat nicht wirklich zeigen, padding/margin angewendet, so ist es schwer zu sagen, was vielleicht falsch läuft.

    Ich würde verändern Sie Ihr styling so:

    #Container {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
}

#Header {
    height: 15%; /* This should really be a static number, not a percentage*/
    width: 100%;
    border-bottom: 2px solid #e8e2e2;
    margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
    • Schönes Wort "so" +1
    • hey, vielen Dank für den Hinweis auf margin auto, viel effizientere Methode ist, statt des linken, aber margin-bottom wie keine Wirkung, ich kann nicht scheinen, um alles schieben bis
    • margin-bottom ist nicht dazu gedacht, schieben Dinge auf, und es ist gedacht, um schieben Sie Sie nach unten. Also, wenn Sie ein element haben, mit nichts darunter, margin-bottom 0 Aussehen wird, unterscheiden sich nicht von margin-bottom 100, da gibt ' s nichts für Sie zu Effekt. Wenn Sie schauen, um ein element nach oben, relativ zu denen Sie normalerweise verwenden, können Sie ein margin-top mit einem negativen Wert
    • absolut genialer Kommentar... ich etwas neues gelernt zu haben und zu verstehen, css, nur ein bisschen besser :p
    InformationsquelleAutor Redit0
  2. 1

    Versuchen, hinzufügen von pading nach header-tag selbst. Denn es ist im Vergleich zu anderen Behältern.

    CSS:

    #Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;

}

#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;

}

#Header h1 {
    position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/

}

    HTML:

    <div id="Container">
<div id="Header">  
   <h1>My Webpage</h1>
 </div>
</div>

    InformationsquelleAutor Litestone
  3. 0

    Erstens, bitte fügen Sie #für Behälter, wie Sie im #Container in css.
    Unten ist der code, wo ich Hinzugefügt margin-bottom für h1. Bitte lassen Sie mich wissen wenn Sie noch irgendwelche Probleme haben.

        <html>
    <head>
    <style type="text/css">
    #Container {
    position: relative;
    width: 96%;
    height: 98%;
    left:2%;
    background-color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 5px;
    }
    #Header {

    position: absolute;
    height: 15%;
    width: 100%;
    /*background-color: red;*/
    border-bottom: 2px solid #e8e2e2;

    }

    #Header h1 {
    font-size: 2.5em;
    text-align: center;
    color:#e8e2e2;
    border:1px solid red;
    margin-bottom:10px;
    }
    </style>
    </head>
    <body>

    <div id="Container">
    <div id="Header">  
       <h1>My Webpage</h1>
       <p>some text here</p>
     </div>
    </div>

    </body>
    </html>

    Hoffe, das hilft.

    Dank

    InformationsquelleAutor Pavithra Ashwath
  4. 0

    Padding-bottom und margin-bottom funktioniert tatsächlich, es ist nur, dass es nicht sichtbar ist, weil Sie derzeit die Einstellung der Höhe des #Header bis 15% und dann gibt es, dass light grey unteren Grenze. Dies ist, was gibt die illusion, dass padding-bottom oder margin-bottom funktioniert nicht.

    Finden Sie funktionierende version hier http://codepen.io/sajadtorkamani/pen/zxxzgo

    HTML

    <div id="Container">
  <div id="Header">  
    <h1>My Webpage</h1>
  </div>
</div>

    CSS

    Container {
  position: relative;
  width: 96%;
  height: 98%;
  left:2%;
  background-color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 5px;
}

#Header {
  position: absolute;
  /* height: 15%; */
  width: 100%;
  /*background-color: red;*/
  border-bottom: 2px solid #e8e2e2;
}

#Header h1 {
  font-size: 2.5em;
  text-align: center;
  color:#e8e2e2;
  padding-bottom: 20px;
  /*background-color: red;*/
}

    Einfach auskommentieren height: 15% für #Header löst das Problem.

    • hey danke, es ist nicht genau das, was ich hoffte, Sie würden passieren, ich wollte nur wissen, ob ich meine position header überall mit margin/padding/unten. aber ich bin überrascht, es funktioniert immer noch ohne Höhe, ich nahm an, Sie sollte immer eine Breite und eine Höhe, um deine divs, ist dies nicht der Fall?
    • Es ist nicht immer der Fall, dass Sie die Breite oder Höhe, aber es kann Zeiten geben, wenn es wahrscheinlich eine gute Idee. Was im Allgemeinen keine gute Idee ist, ist die Einstellung der Höhe eines Elements in Prozent, deren parent-element keine explizite Höhe. In diesem Fall ist ein element der Höhe des Inhalts. Dies ist, was passiert in Ihrem Fall, in dem #Container (das übergeordnete Element #Header) hat einen Prozentsatz und nicht als explizite Höhe. Dieser Beitrag könnte helfen: stackoverflow.com/questions/1622027/...
    InformationsquelleAutor Sajad Torkamani
Schreibe einen Kommentar