HTML Boxing

HTML Boxing:

Html Boxing consists of different layers that you can manipulate independently via CSS. Doing so allows you to arrange elements in relation to one another and style them in many ways.

• Width — The width of the content area of an element. For block elements, this is by default 100%. For inline elements, it however much space their content needs.
• Height — As you can imagine, this denotes an element’s height. It is usually controlled by the content inside it but you can also apply a specific height if needed. Again, this only works for block elements.
• Border — Borders run around every HTML element, even if you don’t see them. They can take on different sizes, styles, and colors. More on that below.
• Padding — This signifies the space between an element’s border and the content within. This is important, for example, so text inside an HTML element remains readable.
• Margin — Finally, margin denotes the space outside of the border. It effectively controls the space between different elements and is very important for page layout, positioning and spacing.

---

Demonstrating the Box Model 1:

Try This

Above Example would looks like this..

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins,background color, font color and the actual content.

Demonstrating the Box Model 2:

Try This