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.


Experimenting

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/

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

<h2>A heading </h2>

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

<p>Another paragraph.</p>

</body>
</html>
Personal tools