Sizes (height, width)

Webpages often have to have a fixed size or should change size due to content or screen size.

We set the size of a section of a webpage using the body property:

body{ 400px }

This will keep the body of the webpage at a fixed width of 400px.

The example below uses all the new CSS rules:

Size example (along with margin and padding)

When we use size, we can see a particular size for a section of a webpage. In this case, the body width has been set 400px.

A red square that has been given a 50px padding, as well as a margin of 100px around all four of its sides. The padding is part of the square but the margin is separate.

Code below:

<html> <head> <style> body{width: 400px} p.example { background-color: red; width: 200px; height: 200px; color: white; padding: 50px; margin: 100px; } </style> </head> <body> <h1>Size Example (along with margin and padding)</h1> When we use size, we can set a particular size for a section of a webpage. In this case, the body width has been set to 400px. <p class="example">This text should be in a red block that has been given padding around of 50px on <b><u>each</u></b> side of the block. The red block has also been given a margin of 100px on all sides. </p> </body> </html>