There are two types of elements in the CSS world: "inline" and "block".

A browser generally renders a new line after any "block" elements in the HTML.

Examples:

• inline: INPUT, A, IMG, BR, a few others...
• block: P, H1, UL, LI, TABLE, almost everything else...

A grouping element lets you style multiple elements as a whole.

SPAN creates an inline element.

<span> Hello <a href="world.com">World </a>! </span>

DIV creates a block element.

<div> <p>Hello</p> <p>World</p> </div> 

<div> Hello <a href="world.com">World </a>! </div> 

The width and height properties can be used to resize block level elements and IMG elements.

A narrow div:

<div style="width:30px;">Hello World!</div>

A distorted image:

<img style="width:100px; height: 30px;" url="cat.jpg">

The overflow property specifies what happens when content overflows the specified dimensions. The default is "visible", which means it flows outside.

<div style="height: 25px;">Hi!</div>

The "hidden" value will trim the content at the border:

<div style="height: 25px; overflow:hidden;">Hi!</div>

The "auto" value can be used to tell the browser to add scrollbars if the content overflows.

<div style="overflow: auto; width: 60px; height: 25px;">
  Hello World</div>

The overflow-y and overflow-x properties can be used to specify different settings for each direction.

<div style="overflow-x: auto; overflow-y: hidden;
  width: 60px; height: 25px;"> Hello World</div>