HTML block elements adjust very differently to horizontal and vertical space.
The reason is that vertical space is basically content-driven, whereas horizontal space is more related to page layout (e.g. browser window width, column width, etc).

Blocks expand horizontally as much as possible.

Experiment by dragging your browser window by its lower right corner to change its width.
Notice that all the blocks automatically expand/contract to fill the horizontal space available to them.

The vertical behavior of blocks is completely different.
Blocks shrink vertically down to the minimum required by the block's content.

This content of this block determines it's height.

Take the line breaks out, and it will shrink vertically as much as it can.

The block below has no contents so it collapses vertically down to nothing but borders, but stil expands horizontally as much as it can.


This block has fixed dimensions because its width and height are set in the CSS.
Setting its width means it doesn't expand horizontally as blocks normally do.
Setting its height means it doesn't collapse vertically as blocks normally do.

According to the CSS Box Model, width and height set the dimensions of the content area only. Any padding, border, or margins is applied outside of that. For example, if the width is 700px, then the actual horizontal space the block takes up in the page is 700px plus any left/right padding/border/margin.