Display Inline

From CSS Discuss

Jump to: navigation, search

Setting the display to display:inline; causes an element to generate inline boxes within its enclosing block. Html Elements such as <b>, <em> and so on are set to display:inline; by default.


You can create interesting effects by setting elements that are usually blocks to display inline, such as headings and paragraphs.

An experiment with inline headings, inspired by http://tbray.org/ongoing/

<head><title>Inline Headings</title>
<style type="text/css">
body {
  font-family: georgia;
h2 {
  display: inline;
p.first {
  display: inline; 

<h2>A heading </h2>

<p class="first">An inline paragraph</p>

<p>Another paragraph.</p>

Personal tools