>CSS Step 1: The Box Model

>The CSS Box Model is pretty straight forward. I think I understand what is going on.

The box model pretty much talks about the borders which surround objects. These objects can be anything from pictures to text to other boxes. The box model also describes how these boxes can be positioned relatively, absolutely, statically or just in a normal flow layout to others boxes.

Each box which surrounds an element has four areas, starting from inside out:

1. The Content Area

2. Padding Area

3. Border Area

4. Margin Area

Worth noting:

– The margin edge height of a box depends on its content height, plus the top and bottom padding.

– The content width for each box is calculated top-down (note sure what this means exactly).

– Margins of boxes are always transparent. Keep in mind then creating a flow layout.

Calculating Widths and Margins:

For Absolutely positioned, non-replaced elements

The width of a containing block is equal to

‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right’

More Details…

I often have this problem of determining how wide a box is. Sometimes I feel it is good that I set a with or height to auto, so the margin can automatically adjust but then I run in to problems in the long run. This is because I am not taking into account the margins and padding or wether I have the left or right attribute applied.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s