.background-div {

width: 50%;

height: 100px;

}

Setting the width or height will update the content of the element only, not the padding or the margin.

When specifying the value as a percentage, the element will be set to that percentage width of its direct parent element. Figure 5.12 is an example of this.

5.12 image

The height and width properties have a few quirks that take a while to get used to. For example, you can specify to set the width of an element to be 100 per cent of the parent and it will work as expected, but it will not work in the same way with the height property. The width property also can’t be applied to inline elements, such as hyperlinks, without first converting the element into a block element (more on that later).

On this note, there are many quirks in HTML and CSS that might seem strange at first, but in time you will come to appreciate the quirks more and understand that they are actually by design and help the developer rather than hinder them. Hang in there new developers – it will all make sense eventually.

Borders, padding and margins

In this section we’ll look at borders, padding and margins. They form the makeup of all block-level elements and provide us with a lot of flexibility when outlining our structure.

Borders

As I explained in the previous chapter, the border is the line around the element that wraps up your content and padding, but not your margin. It’s the boundary of your element, really. Just like, you know, a border. You might have noticed by now that CSS and HTML tags and properties can be extremely descriptive at times. This can be a great help when first starting out in web design.

So – borders – what can we do with them? Well, actually quite a lot. Let’s start by looking at all the different styles of borders we can apply:

  • Dotted. A dotted border.
  • Dashed. A longer, dashed border.
  • Solid. A solid border without anything fancy.
  • Double. A double lined border.
  • Groove. A 3D grooved border.
  • Ridge. A 3D ridged border.
  • Inset. A 3D grooved border.
  • Outset. A 3D grooved border.
  • Hidden. Hides the border but keeps the space.

Let’s run through a quick exercise to familiarize yourself with how each of the styles renders in the browser.