Member Avatar for ddanielsmith

I'm so cofused and I don't understand the box model at all.
For example, How do I know what number to use with margin and padding?
It's not like I have a grid and I just don't get the concept of margin and padding at all or which number to use for them.
I get the idea that each element is a box, but when it comes to different box types i'm also confused.
Please help me!
I appreciate any help whatsoever, but please don't provide a link to another site because I think I have read every article there is!

  • 2 Contributors
  • 1 Reply
  • 79 Views
  • 42 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

So what you use for padding and margin is up to you as it depends on what you are trying to do with regard to styling.

the basic concept of the box model is as follows:

content --> padding --> border --> margin

So lets say you have an element such as an image (content). You want to draw a border around the image.

selector {border:1px solid black;}

this CSS will simply draw a solid black line around the element. If the padding being inherited is 0 for both padding and content, then the next element is up against this border.

Say this element is an image. an you want some space between the edge of the image and its border. then apply some padding..

selector {border:1px solid black;padding:5px}

A 5px padding places 5px of space around the content and its border.

now say you want 10px of space between the border and the elements around it.

selector {border:1px solid black;padding:5px;margin:10px}

here is an article that you can reference regarding the box model. Hope this info helps.
CSS Box Model

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.