Probleme mit padding in DIV container

[syrvn]

Hallo,


ich bin ziemlicher HTML Neuling und versuche mir gerade eine Website aufzubauen. Ich dachte eigentlich, dass ich padding und margin verstanden hätte aber irgendwie wird der Rand in meinen DIV Containern komisch verschoben. Hier mein Code:

CSS:
.container_large {
    width:720px;
    height:1210px;
    background-color:gray;
    margin:auto auto auto auto;
    padding:0px 0px 0px 0px;
    }
    
.container_content {
      width:700px;
      height:110px;
      background-color:white;
      margin:auto auto auto auto;
      padding:20px;
      }

HTML:
<div class="container_large">
            
      <div class="container_content">

          Hier steht später der Inhalt.

      </div>

</div>

mit padding: 20px; in .container_content wollte ich eigentlich erreichen, dass der Text nicht direkt am Rand klatscht. Was aber passiert ist, dass der .container_content plötzlich Größer ist als der .container_large. Wie kann das passieren?


Liebe Grüße

 

[Space Vampire]

Da du .container_content eine fixe Breite mitgibst statt einen Prozentwert, wird Padding auf die 700px aufgerechnet.
Dadurch wird die Box 740px breit.

Lösung 1:
Ziehe das Padding von den hinterlegten Maßen ab

Lösung 2:
Gib .container_content 100% Breite und eine Margin für den Abstand zu .container_large

 

[syrvn]

Hallo,

vielen Dank für diese schnelle Antwort. Also Lösung 1 funktioniert prima. Ich habe trotzdem gerade noch Lösung 2 versucht um HTML besser verstehen zu können. Lösung 2 scheint ja eigentlich genau so simple zu sein wie Lösung 1. Allerdings wenn ich in .container_content width=100%, margin=10px und padding=20px setze dann wird am linken und oberen Rand alles genau so ausgerichtet wie es sein sollte nur am rechten Rand ragt .container_content weit über den .container_large hinaus.

 

[janm]

mit padding 20 px ist der letzendliche container 40px größer, weil padding 20px 20px links und genauso viel rechts insgesamt 40px ausmachen.