Grow your CSS skills. Land your dream job.

Margings Not Cancelling Out CSS

  • # May 5, 2013 at 8:47 am

    Hello.

    On my footer my margin very left of page is not stretch 100%;. And also at the top there is margin I have put 0px to all necessary areas not sure whats going on.

    http://codepen.io/mwbcomputers/pen/JcCjI

    # May 5, 2013 at 8:54 am

    body { margin: 0; }

    # May 5, 2013 at 9:10 am

    Cleaned up styles: http://codepen.io/Merri/pen/kljHF

    With cleanup I mean that I took out everything that didn’t really have any effect. It is a very good idea to limit styles so that you are more specific with what you do and not go trigger happy shooting `margin: 0` and `padding: 0` everywhere, especially with elements that target divs as no div by default ever have any margin or padding. So when you add such unrequired styles you’re just confusing yourself (as well as others).

    The thing that bites you is how margins collapse. If first or last child element of a div has margin (like headers do) that margin becomes the margin of the parent element. So that is how it may seem like a div would have a margin even though it really is h3 or h5 margin for example. It is a clever and in some cases very useful mechanic you just need to be aware of.

    I also switched from floats to `display: inline-block` because latter are easier to deal with. No hard written `height: 300px` magic numbers.

    # May 5, 2013 at 9:14 am

    Thanks All

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".