Block elements take up the full width of the page and are naturally displayed on a new line. Block elements can not be nested within inline elements.
Examples of block elements :
- <div>
- <h1> … <h6>
- <p>
- <table>
- <ul>, <ol>, <dl>
- <li>, <dt>, <dd>
- <form>
Inline elements only take up as much width as is required to display the element and will not force a new line. A width or height will not displayed on an inline element.
Examples of inline elements :
- <span>
- <img>
- <a>
- <strong>
- <em>
With the CSS command “display: inline” block elements can be altered to behave as inline elements. By floating these elements, it will give the appearance of an inline element but will also allow you to style them as if they were block elements. Therefore width and height can be applied to float’s successfully irrespective of whether the element has a default display of block or inline which is the reason why float’s are used so much in web design.