This page is dedicated to a brief Question and Answer review of the "Box Model" in CSS. The contents of this page can be navigated by using your scroll wheel or the heading links at the top of the page. (Which were not enabled because the page wasn't long enough.)
Q1: What is the CSS box model?
A: The CSS Box model is an approach to organizing and displaying content using CSS. The Box model takes its name from the method whereby all "containters" (headers, divs, paragraphs, and the like) are enclosed within margins and paddings up to the content itself. Typcial box models utilize an assortment of margins, borders, paddings, and contents levels to containters held within larger "parent" containers (e.g. The body holds both the header and footer).
Q2: What is the difference between margin and padding?
A: The margin of an element is the space around the outermost border of the element itself, i.e. the space between that element and other separate elements. Whereas the padding on an element is contained within that element and is the space between the actual content (usually text) and the outermost border of that element. E.g. the space between text and its border is padding while the space between the border and the other heading elements is its margin.
Q3: How is an HTML element's height and width determined?
A: The height and width of an HTML element can either be determined by explicitly stating their measurements within CSS or by setting their measurements and/or restraints to maintain a relative proportion to other elements of the page.
Q4: Explain this CSS property: padding: 25px 50px;.
A: The CSS property padding: 25px 50px; is the shorthand syntax for the padding attribute. Its current order indicates a padding of 25 pixels on the top of the element and 50 pixels on the right of the element. In this form two more pixel measurements coud be given for the bottom and left sizes respectively.
Q5: What is the difference between a border and an outline?
A: An outline is CSS has no width outside of the element and is much more limited in its styling options as opposed to a border which can be styled with a radius attribute to round the corners or can have styling made to only certain of the sides.