Lab 4

CSS Box Model FAQ

  1. What is the CSS Box Model?
    2. The CSS Box model is what we use to define the space that content occupies on an html page. It is comprised of concentric, rectangular rings that allow the web developer fine control over where content appears on the screen. From innermost to outermost, these rings are defined as:
    • Content: the space of the actual shape filled by text, images, etc.
    • Padding: The space that seperates the content from the edges of the space that "belongs" to the content.
    • Border: A demarcation of varying size that seperates the space that belongs to this content and the rest of the html page
    • Margin: The area surrounding a border, which, while affected by the content, behaves according to styling (color, etc.) of the surrounding html page
  2. How is an HTML element's height and width determined?
    3. Height and width of an HTML element can be set in CSS using the height and width properties. They may be set in absolute unites (x pixels) or as percentages of the viewport.
  3. Explain this CSS property:
    padding:25px 50px;
    4. Padding refers to the space between the content of an element and the edges of the element. When given 2 arguments, CSS sets the top and bottom padding of the content to equal the first argument, and the left and right sides of the content to equal the second.
  4. What is the difference between a border and an outline?
    5. An outline extends into the element, while the border extends out of the element. The result of this is that a border will take up additional space on the web page.