Course: CSS Basics

Properties for Sizes and Spacing [5/15]

Using CSS you can set the element width, height, margins and paddings, as well as the minimum/maximum width and height, etc.

All properties affecting the size, margins and paddings of elements are described in what is called the "CSS Block Model". Besides the properties outlining sizes, paddings and margins, the block model includes properties for borders; also, a key property is display, which specifies the type of an element (block, inline, etc.).

In this task, you will learn some of the block model properties; however, a more detailed and complete picture will be given later, in the upcoming "Block Model" course.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Properties for Sizes and Spacing</title> </head> <body> <h1>Block Elements and CSS</h1> <p class="p-first">Using CSS, you can specify sizes and spacing for block elements. An example of such an element is the &lt;p&gt; tag.</p> <p class="p-second">For block elements, you can set paddings and margins.</p> <p class="p-third">Also, you can set width and height for them.</p> </body> </html>
p { margin: 16px 0 16px 0; background-color: #dff0d8; } .p-first { } .p-second { } .p-third { }
HTML Academy
  1. Add to the CSS rule for the p-first class, property margin-left: 50px;.
  2. Add to the CSS rule for the p-second class, property padding: 20px;.
  3. Add to the CSS rule for the p-third class, property width: 50%;.

The properties we have been using here are discussed in more detail in the upcoming "Block Model" course.

Theory Check Next