Lesson 2.2: Dimensions – The Properties

In the last lesson, we covered the various dimensions that are available to use in CSS. In this lesson, we’ll put those to work with our basic sizing and layout properties: height, width, padding, and margin.

Height & Width

Height and width are the basic two properties which define how big something is. By default, inline elements have a width that is as small as they can possibly have, based on their content, while block level elements have a width that is as wide as they can possibly have, based on their parent’s width.

Height, by default, is always the minimum amount that can be taken up, based on the content it has.

We can, however, directly affect the height and width with the ‘height’ and ‘width’ CSS properties. The following example would set all div elements to be 400px tall and 50% wide:

div {
  height: 400px;
  width: 50%;
}

That would make the div be 400 pixels wide, regardless of anything, and make it 50% the width of it’s parent container. So, if it’s parent was 1000 pixels wide, it would be 500 pixels wide.

Now, notice how I said “regardless of anything”. I said that because even if the content were larger than 400 pixels, the box would still remain 400 pixels tall and 50% wide, and it’d be up to the “overflow” property to determine what to do with the extra. We’ll discuss overflow later on.

We also have two other properties available for each height and width: min-height and min-width and max-height and max-width. These allow us to set these properties minimum and maximum sizes.

If we set the minimum, it means that it won’t be smaller than this, even if there isn’t enough content to fill up the whole space. If we set the maximum, it means it’ll be as small as it can if there isn’t enough content, and stops growing once it reaches it’s maximum size, regardless if there is more content. Once again, it would be up to overflow to handle the extra.

If you set a width but don’t set a height, it will stay that set width and keep growing vertically as much as it needs.

If you set a height but don’t set a width, it will act depending on if it is inline or block. If it is inline, it will get as width as it needs, up to 100% of the parent container and will still only take us much height as it needs (meaning it effectively ignores the height property). If the element is block, it will take 100% of the width it can, but will still be the height you specified. Setting min or max of these values causes it to react in similar ways, but in accordance to how height and width normally act.

Margin & Padding

If you remember the image from the previous lesson, it showed light blue and green areas which represented margin and padding. Margin and padding act essentially the same, with the only difference being that margin is outside of the element and padding is on the inside.

Margin specifies the amount of space outside of an element that it take up. Padding specifies how far inside something goes before it can be display.

So, if you had a margin of 10 pixels all around a division, that means that nothing could be within 10 pixels on any side of that division. If you had a padding of 5 pixels on that division, with a paragraph inside of it, that paragraph would be 5 pixels away from the edge of the division.

Margins and padding can be set a number of ways. Each has a -left, -right, -top, and -bottom property (so, margin-left, padding-right, etc.). Using this and giving it one value, you can set each of these individually.

The other way to set them is by simply using the ‘margin’ and ‘padding’. When using these properties, they take between one to four space separated values. Depending how many values you give them depends what the numbers do:

• One value: that one value sets top, right, bottom, and left.
• Two values: the first value sets top and bottom, the second sets right and left.
• Three values: the first value sets top, the second sets right and left, and the third sets bottom.
• Four values: the first sets top, the second sets right, the third sets bottom, and the fourth sets left.

An easy way to remember this is just remember that the order it top, right, bottom, left. Then, whenever you don’t have a bottom for one, just remember that it’ll be set by the value most like it (top/bottom or right/left).

So, below is two ways to set up all divisions to have a margin of 10 pixels on the top and bottom and 5 pixels on the left and right, width the padding being 5 for the top, 10 for the right, 20 for the bottom, and 5 for the left:

div {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px;

  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 5px;
}

div {
  margin: 10px 5px;
  padding: 5px 10px 20px 5px;
}

It’s pretty easy to see why you’d want to use the shorter ones, even if you are only setting one or two values.

Border

You may not think it, but the border actually contributes to the total dimensions of an element as well. Like margin and padding, there are also several ways to set a border. In fact, there are so many, that we are going to spend an entire lesson on borders, in our next lesson.

Related Extra Credit

Internet Explorer 6 and lower are known for being rather standards-non-compliant. As such, not everything discussed in our lessons works the same way in these browsers. While they are almost ancient history, they aren’t quite old enough that we can stop worrying about them yet.

An important thing to remember with Internet Explorer 6 and lower is that they don’t know what the max and min heights and widths are, as such, they only respond to the height and width value. Also, they don’t properly act on those either. Internet Explorer 6 and lower treat height and width like most browsers treat min-height and min-width.

However, because of this, there is a simple solution. There are special “hacks” web developers use to make their site look acceptable on IE6 and lower. The basic one is to start a property with “* html”. Most modern browsers ignore this property, without it throwing an error, but IE6 will follow what is inside. So, you can do this:

div {
  min-height: 500px;
}

* html div {
  height: 500px;
}

Now, the div will function nearly identically in both IE6 and modern browsers. You couldn’t just set the height in the div, because then everything that treats it properly would get broken.

The reason the “* html” hack works, but is still considered “valid” is because in CSS, the * is a wild card, meaning it matches everything. However, since html is the outermost element, it has no parent, so most browsers can’t find anything that is “* html”, so they just ignore it. IE6 however has a bug which makes it think html does have a parent, so it will respond to the “* html” as something normal.

Next lesson we’ll cover borders, and after that we’ll learn how to calculate the exact width and height of our elements, which will make our lives a lot easier: Lesson 2.3: Dimensions – Borders.