CSS Block verses Inline

All elements in CSS have one of three display types. The characteristics of these types are:

  • Block (display:block;)
    • New line before and after.
    • Takes up the available width.
    • Width, height, margin-top, margin-bottom can be set.
  • Inline (display:inline;)
  • None (display:none;)
    • Not visible.

Each HTML tag has a natural display type, which can be overridden with the CSS display property.

Display types for common Html tags
Block Inline None
<div> <span> <meta>
<h1>…<h6> <a> <style>
<p> <b>,<strong>
<ul>,<ol>,<dl> <img/>
<li>,<dt>,<dd> <br/>
<table>,<tr> <em>,<i>
<blockquote> <input>
<pre> <addr>,<acronym>
<form>,<fieldset> <sub>,<sup>
<label>

The difference between display:none and visibility:hidden, is that a display:none element takes up no space on the page, whereas an visibility:hidden element still uses space – you just can’t see it.

Leave a Reply

Your email address will not be published. Required fields are marked *