Describe Margin and padding as characters, create a story and tell their roles in relation to the box model.

Margin also known as the knights of the round table protect the perimeter of the castle also known as "The Box Model" Their role is to push out invading elements and keep them away from the box. However much like real knights they can have both positive and negative core values. Setting up a knight with a negative value can have dangerous consequences like overlapping elements within the Box. Whether or not you intend to use standard knights or alternative ones, Margins always get added after the initial visible perimeter of the box has been established.

Padding while similar to the valient knights of margins, actually serves a different role when it comes to the round table. Padding sits between the border and the content area but much like margins it pushes other envading content away from itself. However the difference between the two is that borders cannot have a negative amount. So unlike margins if you were to set up a background color then the color would be displayed behind the padding. Much like setting up a frame around the color. Padding is also in charge of controlling this on all four sides of the element in question.

The four parts of an HTML box model include the following:

• Content Box: The area where content will be displayed.
• Padding Box: The padding that sits around the content as white space.
• Border Box: Wraps around the content and any padding associated with said content.
• Margin Box: This is the outermost layer, wraps around the content, padding, and border as white space between this box and other elements.