CSS: margin > 0 reisst Lücken ins Layout?

  1. 2nd

    2nd Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Hmm, stehe gerade auf dem Schlauch und checks nicht:

    Mein Inhalts DIV hat eine Hintergrundfarbe und li + re Borders mit 1px. So weit, so gut. Wenn ich jedoch eine Headline und einen Absatz einbaue, habe ich über der Überschrift und unter dem Absatz einen Bereich, in dem der Hintergrund und die Borders unterbrochen sind. Setze ich MARGIN/PADDING im CSS von H1 und p auf 0 geht es nahtlos, aber ich brauche natürlich individuelle Abstände.

    HTML:
    #headerHome {
    	position:relative;
    	background-color:#004a80;
    	border-left: 1px #FFFFFF solid;
    	border-right: 1px #FFFFFF solid;	
    }
    
    #contentHome {
    	position:relative;
    	background-color:#004a80;
    	border-left: 1px #FFFFFF solid;
    	border-right: 1px #FFFFFF solid;	
    }
    
    h1 {
    	font-size: 21px;
    }
    
    p {
    	font-size: 12px;
    	color: #77afdb;
    }
    
    
    HTML:
    <div id="headerHome">
       Navigation
    </div>
    
    <div id="contentHome">
    		
       <h1>Willkommen bei uns!</h1>
    
        <p>So schlicht und persönlich kann alles sein...</p>
    </div>
    
    So sieht es zerissen aus:

    [​IMG]

    Mir fällt gerade überhaupt nicht ein, woran das liegen könnte :kopfkratz:
    Jemand eine Idee?

    2nd
     
  2. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    mach mal margin: 0px; bei den Divs.
     
    ThaHammer, 30.08.2006
  3. miss.moxy

    miss.moxyMacUser Mitglied

    Mitglied seit:
    15.05.2004
    Beiträge:
    6.539
    Zustimmungen:
    624
    Also wenn das ein ähnliches Problem ist, wie das in dem Buch zu
    css-Zengarden, dann wäre padding: 1px 0; auf die divs einen Versuch
    wert… Weiß allerdings nicht, ob das dir was bringt :/
     
    miss.moxy, 30.08.2006
  4. 2nd

    2nd Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Hmm, ich habe bei H1 und P den MARGIN auf 0 gesetzt und damit geht es. Die Abstände regulier ich nun über die PADDINGs - so geht es auf jeden Fall erstmal.

    @hammer: Das hatte ich schon probiert - aber daran liegt es nicht. Mein Header-Div wird ja auch nahtlos an an das Content-Div geklebt.

    @lea: Versuche ich auch noch mal, danke!

    Was mich halt so irritiert ist folgendes: Die H1-Überschrift und der Absatz liegen innerhalb des Content-DIVs. Warum macht der MARGIN vom Absatz und von der Überschrift eine Lücke zwischen die DIVs? Meinem Verständnis nach sollte das nicht sein - das ist unlogisch.

    2nd
     
  5. Darii

    DariiMacUser Mitglied

    Mitglied seit:
    24.02.2004
    Beiträge:
    2.065
    Zustimmungen:
    110
    Ist aber so. Vertikale margins werden unter bestimmten Umständen zusammengefasst(das Wort trifft es nicht ganz, aber ich wusste nicht, wie ich collapse sinngemäß übersetzen soll).

    Nachzulesen ist das ganze hier.
     
    Darii, 30.08.2006
  6. pichfl

    pichflMacUser Mitglied

    Mitglied seit:
    03.08.2005
    Beiträge:
    134
    Zustimmungen:
    2
    collapse: zusammenfallen.

    und ein padding:0.01em 0; reicht aus, um das zu verhindern.
    (also so klein, dass es der browser nicht mehr als pixel darstellt)
     
    pichfl, 31.08.2006
  7. 2nd

    2nd Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Danke für die Infos.

    2nd
     
  8. miss.moxy

    miss.moxyMacUser Mitglied

    Mitglied seit:
    15.05.2004
    Beiträge:
    6.539
    Zustimmungen:
    624
    Interessant zu wissen, dass das auch mit Werten < 1px funktioniert… ?!
    0.01em klingt layouttechnisch sympathischer als 1px :)
     
    miss.moxy, 01.09.2006
  9. 2nd

    2nd Thread StarterMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Hmm, ich nochmal: Das padding:0.01em 0; auf die DIVs bringt nicht gewünschten Erfolg?!?

    2nd
     
  10. Darii

    DariiMacUser Mitglied

    Mitglied seit:
    24.02.2004
    Beiträge:
    2.065
    Zustimmungen:
    110
    Ist das jetzt eine Frage oder eine Aussage?
     
    Darii, 01.09.2006
Die Seite wird geladen...
Ähnliche Themen - CSS margin reisst
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    312
  2. hello
    Antworten:
    1
    Aufrufe:
    238
  3. Hoooray
    Antworten:
    2
    Aufrufe:
    328
    Hoooray
    21.07.2015
  4. Kemna
    Antworten:
    6
    Aufrufe:
    569
  5. kaifreund
    Antworten:
    1
    Aufrufe:
    715
    kaifreund
    02.12.2004