{theblog}The Blog

In Depth CSS Part 1: Margins, Padding & The Box Model

Posted on 03/08/10 | Category: blog, development | Tags: , ,

In the first post of the CSS In depth series, we’ll be talking about margins, padding and the box model.

Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility.

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

Read the rest of my guest post on Spyre Studios »

TwitterFacebookStumbleUponDiggDeliciousRedditGoogleTechnorati
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?.

Related Posts You Might Like

4 Comments

  1. saqib says:

    Result of the Link = Not Found

  2. Ed Moore says:

    Amber, please update the link to Spyre Studios. It’s saying not found. I would really like to read the rest of your article.

    Thanks :)

  3. Jon Phillips says:

    Sorry about that guys, I just published the post :)

    The link should work fine now, if it doesn’t here it is: http://spyrestudios.com/css-in-depth-margins-padding-the-box-model/

    Cheers

  4. Oops sorry guys. I meant to schedule it for 2pm today but I forgot WordPress uses army time so it went out at 2 am :/

Leave a Reply




Copyright © 2010 Amber Weinberg. All rights Reserved. Please don't steal, it's really not cool! But if you'd love to work with me (you do don't you?), please contact me :)