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!

3 answers

Ktash 1851
4
points

An Introduction to boxes

First things first. There are basically 3 boxes you'll need to understand in order to start designing sites. There are, in truth, many many more boxes than 3, but there are 3 really important ones. They are block, inline, and inline-block. These map to values of the display CSS property. I'll go over each of them so you have a sense what each one means. But let's start with the pieces of a box.

Building a box

The pieces of a box

Each box has a set of properties. From the outside in, they are:

  • Margin
  • Border
  • Padding
  • Dimensions (Width/Height)

Margin is the outer-most property of a box. It is the amount of space that you want between this box and other boxes. Margin does not include things like background images or fill color, and is simply blank space. Margin's also collapse upon each other. This means that if you have to elements next to eachother, the one with the larger margin will dictate the amount of space between the two. Margins from different elements do not add together (for the most part). The exception to this is if the elements are set to be floated.

Border should be a pretty simple one to understand. It is the border around the box and sits between the margin and padding. If the border has been rounded with border-radius, the margin will be taken from the point where the border would sit if it weren't rounded.

Padding is the space inside the box between the border and the content of the box. It will include things like fill colors, background images and other related properties. Content will not overlap this area unless you explicitly set it to.

Dimensions are the actual width and height of the area in which you want you text or other content to go. These values are not the visual size of the box, but the size of usable area (unless other properties are set) of the box where content will go.

More Info

How big is my box?

This is the part that trips a lot of people up. They want their box to be a certain size and are confused at how to get it to look the way they want and be the correct size. There are 3 sizes that will be important to you. The first is the visual box size. This is the size of the box as it will be seen by the user. This value is width/height + padding + border, which are all of the elements which will have visual effect other than spacing. The second value is the size of the content in the box. This will be just your width/height value. That is the space you have to play with inside the box where you can put other boxes (elements/content). The third is the full box size. That is the size of the box in regards to all of its pieces including both visual and non-visual area. This is used in your layout to determine how other boxes will interact with this one. This value is all of the above values added together, with the caveat that margin may be influenced by other boxes around this one.

But you mentioned 3 types of boxes...

As I said in my intro, there are 3 types of boxes you need to understand as they are the most common types of boxes. I'll go over each of them, and tell you what it means for these values above. Basically, each is just a different set of rules for how it handles each of these values above

Block

The first type is the "block" type. This type is for elements like <div> or <p> and is used to denote boxes that should take up all of the content width space (dimension) that they can. The elements will take up as much width as they are able, minus padding, border, and margin. This means, unless you specify a width of these elements, they will stretch out and be big. This is very advantageous, as it means you can use padding, border and margin values, and it will automatically adjust the width to fill in the remaining space.

Inline

The second type is "inline". This type is for content that is like words on a page. Common examples of these types of elements are <span> and <strong> elements. These elements have a few special rules. First and foremost, width and height cannot be set on these elements. Width and height values are ignored completely, and instead the size of the content dictates how large the box should be. It will be no wider than it's parent, however. Also, it will ignore top and bottom values for margin, border and padding when calculating its height full box height. Height will be dictated by the line-height value instead, which means the visual height, and the calculated height (what I called the full box size) can be different.

Inline-Block

The final type is "inline-block", which is a mix of both. The best example of an element like this is an <img>. These elements will act like block type elements with one major difference. Where-as the block level element will try to take up as much content width as it can, the inline-block elements will only take up as much space as they have content (similar to what the inline block does). They also have one other dimension to throw into the mix. Since they are considered partially inline, they line themselves up on the baseline for text, which means they leave space for descenders so that they won't mess with inline text sizing.

Answered almost 5 years ago by Ktash
danwellman 5600
1
point

You say

It's not like I have a grid

But, there's nothing to stop you using a grid. There are a ton of decent, established CSS grid systems, going from the traditional grids like 960gs, to more modern fluid and responsive grids like Twitter's bootstrap (although Bootstrap is way more than just a grid!).

Using a CSS grid can help massively with layouts. Just remember to put padding/margins on the elements inside the grid containers, not the grid containers themselves, or you'll be back where you started ;)

Also, it may just confuse you even more, but if you don't have to worry about old browsers (like, less than IE8), you can use a new CSS property called box-sizing. If you set this to border-box, then boxes change so that padding does not affect their total width

Answered almost 5 years ago by danwellman
0
points

I've just started working with bootstrap and find the learning curve to be a bit steep at first but then it just started clicking and I absolutely love it! You can go to ThemeForest.com and search for sites (especially the admin portion of the site) to see examples of sites coded with bootstrap (I believe you can filter the results to only include bootstrap). One that comes to mind on themeforest is the gebo admin theme. That is where I first learned about bootstrap.

Answered almost 5 years ago by Tom Lackey