##Inline vs Block Elements By default, some HTML elements are displayed as block or inline elements. ###Block Elements * takes up 100% width of its container, no matter how long the actual content is * will be the same height as its content * always starts on a new line * can wrap other block level elements or inline elements * can apply sizing related CSS to it (margin, padding, height, width) ###Inline Elements * will be the height and width of its content * always appears "in a line" with other inline level elements * can wrap other inline elements but cannot wrap block level elements *except* `<a>` tags. This is only valid with an HTML5 doctype. * does not render CSS height and width at all, will apply margin and padding but with unexpected results ###Inline-block * best of both worlds * floats left and is the size & height of its content, like inline elements * accepts height and width values like block elements **Extra Resource**: [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)

Block & Inline Example

Click Edit in JSFiddle to make edits. Let's see what happens when height, width, margin and padding is applied to inline and block elements.

##CSS Display property These default display styles can be changed using the CSS `display` property. `display: inline` can be used to get block level elements to line up side by side, in a line. The only problem is the block level element will not render sizing properties, just like default inline elements. `display: block` can be used to make inline elements behave like a block level element (be able to apply size related properties) but they will no longer sit side by side, in a line. `display: inline-block` is the best of both worlds. Elements will line up side by side and also render sizing properties. `display: none;` will hide the element. Let's go back to our previous example and try using the `display` property.