Each of the three boxes surrounding the content can have different sizes on the top, right, bottom, and left of the element. Any or all of these sizes can also be set to zero.
Inline and Block
HTML has two primary categories of elements: block and inline. The box model applies differently to these two kinds of elements, so it is important to know the difference between them. Examples of inline elements include <a>, <strong> and <em>, whereas <p>, <h1>, and <form> are block elements.
Inline elements flow along with text content and are split as necessary to fit the width of their container. They may not contain block elements, with the exception of the <a> element, which can wrap any type of element.
The boxes surrounding inline and block elements have different features. A block element can manipulate all properties in the box model, including the width and height of the content area, as well as the border, padding, and margin. If no width is set, a block element expands horizontally to the maximum allowed by the containing element.
An inline element is more limited in that it cannot set the vertical margins (top or bottom). It also cannot change the width or height of its inline box. For an inline element, the minimum height can be set with the line-height property, but the width and height adjust automatically to fit the content that the element holds.
There is a subcategory of inline elements, called replaced inline elements, that use external objects such as <img>, <video>, and <object>; and form elements such as <input> and <textarea>. With these inline elements, all box properties can be manipulated the same way as block elements.
Span and Div
Semantic Elements
In HTML 4, the generic <div> element was the main element used for defining sections of a web page to be formatted with CSS. It did not convey any semantic meaning, which was considered a shortcoming of the language. The HTML 5 specification introduced a number of other structural elements you are encouraged to use, such as <header>, <footer>, <section>, <article>, and <nav>.
These new container elements are preferred when they are appropriate given the context, for accessibility and maintainability reasons. Whenever there is not a more semantically suitable element available, the <div> element is still appropriate and continues to be widely used as a generic container. HTML 5 elements became supported in Chrome 6+, Firefox 4+, Safari 5+, Opera 11.5+ and IE 9+.