There are two types of display content in CSS - block and inline
Samples of CSS style rules that will be explained in the tutorial below:
In the past two tutorials I have highlighted the difference between the <div> and <span> tags and the fact that CSS Stylings are tag dependent. In this tutorial this issue is addressed directly where we make clear the distinction between inline (<span>, <a>, <img>, <cite> ,etc) tags versus block tags(<div>, <p>, <h1>...<h8>, <table>...<td>, <dl>..<dd>, etc). Block styling I have just covered with the CSS Box model. Now I have warned you that Inline Elements such as <span> do not follow the Box model. In this next section we see the details.
As we have noted inline elements like <span>, <a>, and <img> work as if they had no margin-top or margin-bottom properties. Literally their inline CSS styling are different, they snake along as text, addresses or a progression of images - just as this .underbold styling does. However, they do have their own "rules of the snaking road". CSS makes a distinction between replaced inline elements such as <img> or <input> tags and non-replaced elements like <span> and <a>. Replaced elements have their tags replaced by images or input text of a possibly indeterminate height or width. Take this CSS logo image , its height determines the height of the line of the text for that line. Meanwhile in this long paragraph (deliberately done this way) demonstrates so-called anonymous text which does not have any other height, margin or padding styling. In sum, Inline elements do not follow the box model - their height, depth, padding and border go by their own rules. However, by adding the display: block property to a styling one can convert some inline elements to display in a block like manner as shown with the <a> tag below:
However, the display: rules are subject to default settings. So <span style="display: block"> is not equivalent to <div> because <div> carries along different default settings for margin-top and so
and likewise <div style="display: inline..."> is not equal to <span>, as can be seen in the examples below:
This is a <span style="display:block">
<div style="display:inline; ..."> starting here and ending here- and it certainly works somewhat like a < span>; but the margin-top is still div-like. So here is the caution when using display:inline and display:block - test Test TEST. Because default properties for the tag may linger and deliver quite unexpected results. The workarounds are often quite simple- in the case of <div> for example set margin-top: 0px and as shown below the problem is solved. Also it is nice to report that all browsers follow the standard stylings here.
Here is the <div> with margin-top: 0px
<div style="display:inline; ...">starting here and ending here- and it is closer in behavior to a <span> than ever. However, after all is said and done, display:inline or block does give users more styling flexibility. And in fact, there are more display properties just for that purpose.
Display: inline-block and run-in: Marked Standards Departures
Taking a cue from the book CSS in Easy Steps page 88 and 89, I display the inline-block property:
First no inline block:
spanred here to here spangreen here to here and then spanblue from here to here - simple!
Now with inline-block styling:
spanred here to here spangreen here to here and then spanblue from here to here - now see what happens- nothing other than change to white colored type. The inline-block styling is just not implemented properly by most of the major browsers. You have to go to the CSS section of W3C website or the CSS in Easy Steps book to see how it should work.
The same happens with the run-in property:
This is a <div> with:
a following <p> as orange run-in
Again none of the major browsers support the display:run-in property. This is what makes Web development so exasperating. The standards, even ones 7 or more years old are just not adhered to. Perhaps, W3C should have a mechanism to deprecate and rid CSS of stylings that are never going to be implemented.
Instead Redmond has launched a campaign of delivering highly proprietary AJAX and XAML-laden code in their efforts to keep their Web developers Windows and/or IE dependent. Their cross browser commitment for Expression Suite and Atlas tools is maybe Firefox and Safari but certainly not Opera and Netscape. Also Microsoft's cross browser and cross OS platform pledges are dependent on 3rd parties to do key coding and support work. Direct support of other browsers and OS platforms remains a "NO-NO" even under new, supposedly Web-friendly CSA-Chief Software Architect, Ray Ozzie. In sum, if your organization is committed to cross-platform and cross-browser implementations, going Microsoft is largely a non-starter and dead end.
Top of Page Tutorials Home CSS references