Comm 328 Responsive Web Design

Block and Inline Elements & the Display Property

Every HTML element has a default method of displaying on the page. This default setting is determined by whether elements are considered block-level or inline.

Everything is a box

An important things to remember when working with HTML and CSS is that every element on the page is a box.

Exercise

To demonstrate this, open up the Simmons Academics page. Using the web inspector, add the following CSS rule. You can click the plus icon under the styles tab to create a new rule.

* {
  border: 1px solid red !important;
}
Screen shot of the Chrome Web Inspector

You should see every single thing on the page with a red border. Notice how they are all boxes.

Block and Inline Differences

Every HTML element has a default method of displaying on the page. This default setting is determined by whether elements are considered block-level or inline.

Block-level elements

Block-level elements have the following properties:

  • Always start on a new line
  • Take up as much horizontal space as possible (the full width of the container or browser window if there is no container)
  • Will respect width and height CSS properties
  • Horizontal and vertical margins both work

Inline elements

Inline elements have the following properties:

  • Do not start on a new line
  • Only use as much horizontal space as required by the content
  • Do not accept width and height CSS properties
  • Margins will work horizontally, but not vertically
  • Padding works on all sides, but the top and bottom may overlap other elements.

The Display Property

block and inline values

You can manipulate how an element behaves on the page by modifying its display property in CSS.

You can set a block-level element to display like an inline element by setting the display property to inline.

p {
  display: inline;
}

You can also cause inline elements to behave like block-level elements using the display property.

i {
  display: block;
}

inline-block

The inline-block value is a strange combo of both block and inline.

  • Elements accept width and height properties
  • Elements can have vertical and horizontal padding on all sides
  • Elements do not start on a new line
  • There will often be a small gap between inline-block elements

none

The none value of the display property will cause an element not to display at all.

This is similar to the visibility property with one important distinction. Setting display to none will cause the element to be removed from the document flow completely, and the space where it would have been will also be removed. Setting the visibility property to hidden will cause the element to be invisible, but the space the element occupies will still be reserved.

Other Display Values

There are many other possible values for the display property witch are much less commonly used. Several of these properties are intended for use when creating tables, but are sometimes used for layout or to trigger browser incompatibilities.