[CSS]CSS Advanced - CSS Display

출처: http://www.w3schools.com/css/css_display_visibility.asp

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

• <h1>
• <p>
• <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

• <span>
• <a>

---

Changing How an Element is Displayed

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.

The following example displays list items as inline elements:

Example

li {display:inline;}

Try it yourself »

The following example displays span elements as block elements:

Example

span {display:block;}

Try it yourself »

Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.

CSS Display

How to hide an element (visibility:hidden)
How to not display an element (display:none)
How to display an element as an inline element
How to display an element as a block element
How to make a table element collapse

Display properties explained