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>

Implementation (CSS)Sizes (height, width)

Sizes (height, width)

Size example (along with margin and padding)

More guides on this topic