CSS Dimensions

Now that we know the difference between block and inline elements and what basically is inline block styling in CSS we can go onto see how to give dimensions to HTML elements explicitly together with discovering some basic concepts.

So what exactly are dimensions? Simply put:

Understanding them in conjunction with different display and position values is vital as a designer to know.

Natural dimensions

Elements in HTML are mainly classified into two categories: we have either block elements or inline elements. Block elements take new lines whereas inline ones take the same one, as you already know. Now what you might know and is the purpose of this chapter is the fact that block elements (by default) take on all of the available width of their parents. In contrast, inline elements just try to fit the content in.

Following in an illustration of this statement.

And as you can see, the first div (block element) spans all the width of it parent whereas span (inline element) just fits in the content.

These are usually referred to as the natural dimensions of the HTML elements. Blocks fill the entire width; inlines try to fit the content.

However while developing stuff you might notice some elements like text area, input take on some other preset dimensions. There are given by the user agent i.e the browser. Nonetheless, these and almost all other HTML elements can be given dimensions manually too and this is what we are about to see next.

Custom Dimensions

In CSS, we can give custom/manual dimensions to HTML elements using the properties width and height. There is more than it seem on the front side involved in custom dimensions which this chapter is mainly all about.

So now with a good intro to dimensions let's move on to discover custom dimensions to their core!

The properties width and height set a custom width and height on an HTML element respectively. They accept values of type <length> i.e non-negative values with units such as px, pt, em, % and so on..

Examples

Following we have a div element with a width and height of 200px:

div {
    width: 200px;
    height: 200px;
    background-color: orange;
}

Following we demonstrate relative dimensions using the em unit:

div {
    width: 4em;
    height: 4em;
    background-color: orange;
}

Changing one dimension doesn't affect the other

One thing to note about CSS dimensions is that if we change any one dimension of an element (except for img) it won't really affect the other. This means that if in the example above we only changed the height, the width would've been unchanged from its default value of filling the entire space available.

Let's see this in real, starting with altering height only (and letting width adjust freely).

div {
    /* no width alteration */
    height: 50px;
    background-color: orange;
}

Now altering width only (and letting height adjust freely):

div {
    /* no width alteration */
    width: 150px;
    background-color: orange;
}

Perhaps a fair perception that comes to the mind is that any element given dimensions manually will definitely resize to those dimensions. This is wrong! There are a couple of factors that affect the final width of an element as we will see in this section.

Dimensions don't work for inline elements

Try giving a custom width or height value to a span element and see the result. The element won't even bother about the value you give to it - it will remain in its natural dimensions. Why does this happen?

It simply happens because span is an inline element. In fact this is a property of all inline elements - they can't be maunally given a width or height value.

span {
    width: 150px;
    background-color: yellow;
}

Padding and borders affect the final dimensions of an element

Recalling both these concepts- padding is the inner spacing of an element and borders, as the name suggest, are the strokes around its edges. Both these CSS properties, by default, affect the final width of an element.

Consider the example below. The div has been given a 200px width, a 40px padding and a 10px borders. The content-box's width is indeed 200px but the final width turns out to be 300px because of the extra length contributed by padding and border.

div {
    width: 200px;
    padding: 40px;
    border: 10px solid black;
}

box-sizing affects the final dimensions

The CSS property box-sizing also affects the final dimensions of an element. We will explore and understand it in the next chapter.

div {
    width: 200px;
    padding: 40px;
    border: 10px solid black;
    box-sizing: border-box;
}