This is the Lab 4 :

Q: What is the CSS box model?

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Q: What is the difference between margin and padding?

The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins.
There are properties for setting the margin for each side of an element (top, right, bottom, and left).
On the other hand, CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left)

Q: How is an HTML element height and width determined?

The height and width properties are used to set the height and width of an element.
The height and width can be set to auto:
(this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

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

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
This means this particular element has top and bottom paddings of 25px and right and left paddings of 50px.

Q: What is the difference between a border and an outline?

In border, the CSS border properties allow you to specify the style, width, and color of an element's border.
But an outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".