Week 3 - The Box Model

This week we are learning about The Box Model. This picture is from the W3 schools website. 

The elements that make up the box are:

• Margin- The margin controls the space outside the border.
• Border- this goes around the padding and the content
• Padding- The padding controls the space inside the border.
• Content- this is where the information goes such as text, images, media etc. 

This set up allows elements to represent themselves on a page. When working on the presentation of an HTML page, space is very important in creating an overall feeling. The box model helps the developer achieve this goal. The content in the middle can be assigned a specific Height & Width by using a p tag as one example.

In this first example I set a 400px max width

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

In this second example I set the margin on all 4 sides on the outside at 50px.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

In this third example I set the padding on all 4 sides on the inside at 50px.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.