Border/Margin problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Florian Brucker
    #1

    Border/Margin problem

    I got a problem with code looking like that:

    <div class="outer">
    <div class="inner">
    Sample text
    </div>
    </div>

    The outer DIV has margin/padding=0, the inner DIV has a margin (all 4
    sides). What happens is that the margin does not position the inner DIV
    more to the inside of the outer one, but creates a margin between the
    outer div and its parent. When a border is added to the outer DIV, it
    renders as it (IMHO) should do.

    A sample page showing both the problem and the border-workaround, can be
    found at http://www.torfbold.com/problem.html

    This happens over here on Linux with Mozilla 1.6 and Opera 7.51.

    According to my understanding of the CSS Box model
    (http://www.w3.org/TR/REC-CSS2/box.html), this is not the correct behaviour.

    I would really appreciate it if some could clarify that mystery for me.

    Thanks,
    Florian
    --
    Minimum Requirement #3: You know where you want to go tomorrow
    (WEB.DE help-wanted ad: Linux Guru)
    [------------ http://www.torfbold.com - POV-Ray gallery ------------]
    Tags: None
    • Lauri Raittila
      #2
      Re: Border/Margin problem

      In article <2sj6pcF1lmdvoU 1@uni-berlin.de>, torf@torfbold.c om says...[color=blue]
      > I got a problem with code looking like that:
      >
      > <div class="outer">
      > <div class="inner">
      > Sample text
      > </div>
      > </div>
      >
      > The outer DIV has margin/padding=0, the inner DIV has a margin (all 4
      > sides). What happens is that the margin does not position the inner DIV
      > more to the inside of the outer one, but creates a margin between the
      > outer div and its parent. When a border is added to the outer DIV, it
      > renders as it (IMHO) should do.[/color]

      Margins collapse. What you see is correct behaviour. See collapsing
      margins in CSS spec. Google past posts here if you don't get it from
      spec.

      --
      Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

        Comment

        • Florian Brucker
          #3
          Re: Border/Margin problem

          > Margins collapse. What you see is correct behaviour. See collapsing[color=blue]
          > margins in CSS spec. Google past posts here if you don't get it from
          > spec.[/color]

          Ooops. Seems I missed that part of the specs. Found it with your help.
          Fixed it by using a padding on the outer div.

          Thanks for your help!
          Florian
          --
          In mathematics you don't understand things.
          You just get used to them. (Johann von Neumann)
          [------------ http://www.torfbold.com - POV-Ray gallery ------------]

            Comment

            Previous template Next
            Working...