Day 22: The Box Model Concept

Today I studied a topic I'd been looking forward to getting to for a while, the CSS box model concept.  We went over the difference between block elements and inline elements, and it was interesting to see how even images which may not be a square/rectangle (such as a hexagonal icon) are actually, in essence, a square/rectangle on the webpage.  It was interesting to see the relationship between the content, padding, border, and margin.  

I learned how to set padding and how to set a border.  For a border, the border-style property must be set to something other than "none," which is the default, in order for a border to appear on the browser.  There are many border-style values, and I played around with none, solid, dashed, dotted, groove, inset, outset, ridge, and double.  Border-style accepts up to four values, so you can actually have a different border value for each side of the element.

The margin property can have negative values, and this allows you to move an element around the webpage.  The browser will interpret your markup differently depending on how many values you enter for the margin property.  This is an example from the W3C website:

Examples:

• margin:10px 5px 15px 20px;
  • top margin is 10px
  • right margin is 5px
  • bottom margin is 15px
  • left margin is 20px
• margin:10px 5px 15px;
  • top margin is 10px
  • right and left margins are 5px
  • bottom margin is 15px
• margin:10px 5px;
  • top and bottom margins are 10px
  • right and left margins are 5px
• margin:10px;
  • all four margins are 10px

The default display for anchor elements is inline, so multiple anchor elements (like links in a navigation bar) will go side by side, unless you give them a display value of block.  If you do that, the elements will display one on top of the other, like block elements do, because they each take up a line, instead of being on the same line.  The display property can use the inline-block element to create blocks that are inline, which is useful for styling navigation bars with several links side by side.

Visibility is another property I learned about today.  If you use a value of hidden with the visibility property, the element specified will be invisible, but will still take up space as if it was there (unlike the value "none," which will make the element both invisible and not take up any space on the page).

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,398

Treehouse Points by Subject Matter: HTML 663, CSS 705, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 66% of all students."

Badge(s) Earned Today:

None

Courses Completed:

How to Make a Website
HTML 

Books Read or in Progress:

"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 4.5

Total Hours Coding: 89