Jump to content

CSS tutorial box model - illogical subject order

Recommended Posts

While refreshing my knowledge about CSS I noticed the CSS box model is explained in the following order:

  1. Borders
  2. Margins
  3. Padding
  4. Height/width
  5. Box model
  6. Outline

First all components of the box model are explained in depth and afterwards a general overview is given (5: box-model). For me as a reader this was confusing, since I didn't get the main concept until reading the "box-model" pageĀ and actually had to go back and reread the margins/padding section to thoroughly understand the system.

I therefore suggest changing the explanation order to:

  1. Box model
  2. Height/width
  3. Padding
  4. Borders
  5. Margins
  6. Outline

For me personally this would make more sense, since first the general concept of the box model is given, and afterwards all individual concepts are explained in depth (going from the inside to the outsideĀ of the css box).

Any opinions about this?

Edited by Jrnr601
Link to post
Share on other sites
  • 7 months later...

I think the existing order is the right order, because to understand the box model you first have to understand border, padding, and height & width.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...