Lab 4 - CSS Box Model

What is the CSS box model?

The box model is the box that is around each HTML element. This box has different layers including: margins, borders, paddding, and content.

What is the difference between margin and padding?

Margin is the space outside the box of the element. It can be used to adjust the postion of the box on the page. Padding is used to manipulate the element inside the box without moving the box itself.

How is an HTML element height and width determined?

Element height is determined by adding all the section spaces together; height + top padding + bottom padding + top border + bottom border + top margin + bottom margin. Element width is determined by adding width + left padding + right padding + left border + right border + left margin + right margin.

Explain this CSS property: padding:25px 50px;

It will set the padding on top and bottom to 25 pixels and set left and right pading to 50 pixels.

What is the difference between a border and an outline?

Borders surround the padding and content. Outlines are lines that are drawn outside the borders to make the elements stand out. The outline is not part of an element's dimensions. The width of the outline does not affect the element's total width and height.