Padding on top/bottom, margin on the sides

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

After once again having fun with vanishing container backgrounds above elements, margins on the bottom being ignored, padding making boxes wider, and things I've torn out of my brain on the ends of hair follicles, I had a thought.

What if on the top and bottom of an element, I only use padding, never margin ?
For the sides of elements, I'll only ever use margin, never padding.

Does this sound like a good thing to do ?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Padding plays funny games with IE (box model), but nothing a few !important's can't fix when needed, if you don't mind them.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

that works fine unless you also use a height... the IE box model is messed up both height and width but otherwise you shouldn't have too many problems with it. The biggest issue will occur in areas where you really need BOTH margin and padding. For example a textarea that needs to have inner padding and outer margin...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Well I'm going to give it a whirl in my current personal project. I'll report back with my experience after I've reworked some stuff.

I've got two things using a height. The header, and the navigation bar directly below the header. Both currently have padding, border, and margin zeroed. Everything else just floats around and "goes with the flow".
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

So far so good. Sticking with this crude rule of thumb is forcing me to wrap some things in what seems like an extra <div>. Everything's snapping into shape in all 4 browsers though.
  • Rika
  • Newbie
  • Newbie
  • Rika
  • Posts: 14
  • Loc: Singapore

Post 3+ Months Ago

maybe working with tables that have padding will help? i have found tables really useful to insert all the elements of a page.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Nah, no tables.

It's been working out well for me to use this odd rule of thumb for elements with a block display. I've been making exceptions for padding on other elements though. Things like spans, links, images, etc.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 29 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.