CSS Basics 106b - Block Versus Inline Content

Home Tutorials Reviews Weblog

Featuring: There are two types of display content in CSS - block and inline
Motivation: Depending on the display mode or content type determines CSS stylings

Samples of CSS style rules that will be explained in the tutorial below:
Stylings
style="display: block; color: red; padding: 5px 5px 15px 15px; border: 5px solid blue;"
style="display:inline; margin-top: 0px; color:yellow;"
.inblox span {display: inline-blocks; background-color: purple; color: white}


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.

InlineElements

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:
Here There Everywhere - standard inline behavior

Now converted to display:block styling:
Here There Everywhere

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"><span style="display:block"> starting here and ending here - and it looks somewhat like like a <div>; but notice the margin-top is not the default <div> 50px setting
And now here is a <div style="display:inline; ...">. Finally, notice I have used style= to supply the styling rule rather than the named .stylename just for convenience sake.

<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.

But the problem goes beyond no-implementation. There are incomplete and conflicting implementations in CSS, JavaScript and DOM that need rationalization. For example, Adobe's Flash ActionScript 3 is based on JavaScript 2.0, E4X, and CSS 2. Only Mozilla and Opera have committed just to E4x - no browser vendor has completely implemented CSS 2 (let alone CSS 3) nor committed to JavaScript 2.0 with its much tighter object model but notable syntax changes. The Web Standards process has been so badly poisoned by Microsoft's defiant delays, non-collaboration and sabotage of standards, that Web standards now barely inch along to completion.

Now in Microsoft's defense, at the Mix2006 and IE launch Bill Gates issued a "mea culpa" for the long 7 year wait to have IE updated in functionality and to begin to address Web standards promised back in 1997-8. But in reality, these two words were just about all developers got from Bill. There was no specific plan nor schedule for implementing the old Web standards from 1997-8 that Microsoft had committed to. There was no commitment to deprecate and remove proprietary extensions to JavaScript, HTML, DOM and CSS. There was no pledge to put a toggle switch in Visual Studio that is available in Dreamweaver and other vendors web development tools that allows users to be warned (or simply prevent the use )of any non-standard or proprietary code.

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.

Summary

The display property is a good example of how fickle Web standards implementations can be among all the browser vendors. The inline and block properties are fairly uniformly implemented across all browsers; in contrast the run-in and inline-block properties are non-existent. In general it appears users will have to endure the effects of Microsoft's deliberate delay and sabotage of major Web and CSS functionality and standards for several more years. Meanwhile users looking for more info on how these CSS display styles should work, check pages 88-89 in CSS in Easy Steps. Also the sections on block and inline elements on pages 255-268 and 318-322 of Beginning CSS by Richard York are helful.


Top of Page  Tutorials Home  CSS references