CSS Basics 106 - Basic Block Content Box

Home Tutorials Reviews Weblog

Featuring: The Block Content Box describes how borders, margins, and padding work
Motivation: The block tags are

Samples of CSS style rules that will be explained in the tutorial below:
Margin Settings
.spanner {margin-left: 80px; margin-top: 5px; border: 3px solid red}
.boxer { color: white; background-color: #000066; text-align: justify;
  padding: 8px; margin-top: 10px; margin-right: 5px; margin-bottom: 5px;
  margin-left: 50px; border: 4px solid #000000; font-size: 12px; }
.foxer { color: green; background-color: #660099; text-align: right;
  padding: 8px; padding-right: 80px; margin: 10px; border-top: 8px outset #CC0033;
  border-bottom: 8px dotted yellow; border-left: 24px solid #003399;
  border-right: 24px solid blue; }


This can be thought of as the last series of the major text formatting tutorials although it really addresses margins, indenting, padding and borders associated with blocks of text. Hence the block model. In our first CSS text tutorial I explained the key difference between the block text tag <div> and the snaking text tag <span> in HTML - for <span> the margin-left, margin-right, plus padding-left, padding-right rules apply only to the start and end of the span of text. Meanwhile the margin-top, margin-bottom, padding-top, and padding-bottom rules do not apply for <span> ; but the border rules do. In contrast for the <div> and its associated block tags:
<p>, <h1>, <h2>...<h8>, <table>, <td>, <tr>, <dl>, <dd>, <dt> generally all the Block Content styling rules apply. Then again, spanning like tags such as <pre> and <cite> exhibit partial response to border, margin, and padding rules. In short, CSS is context or tag dependent. This is an important observation - it means the styling rules will not apply uniformly.
The Block Content Model

The drawing to the left explains the basics of the Block Content Model. It is fairly simple. Right next to the text is a box of padding that separates the text from any enclosing border. Each side of the padding can have its own thickness. The border can have individual sizes with different thickness, color, and border styling.

And then outside the border is the margin between the border and the container tag. This is the essence of the Block Content Model. Think of it as three enclosing boxes around the text - starting from the outside container tag going in it is: margin then border and padding being innermost. For this reason this is also known as the CSS Box Model .

In the examples below we use <div>, <p>, <h2>, <h6> as examples of block containers. Note that <div> and <p> are closest to matching one another. The <h2> and <h6> inherit some font-styling characteristics which gives each a slightly different styling. But all of the block containers observe the margin, border, padding and even the text-align: justify stylings. Finally, here is a note of caution. In the border stylings two rules must be strictly observed or the border will not appear. First, the order of the border properties are:
  border: thickness  border-style  color
  border: 5px solid yellow
Second, notice that there are no commas separating the properties. If you put in commas, some browsers will not display the border.

<DIV> using .boxer

CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster

<P> using .boxer

CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster


<H2> using .boxer

CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster


<H6> using .boxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster

But when I add the <cite> and <pre> tags with class="boxer" for these spanning tags, all margin, border, and padding bets are off. For example, to get the <pre> tag to fit in our standard 800px column width I had to add hard line break tags, <br> . Meanwhile <cite> was doing strange things with our .boxer class settings which only the CSS gods know how to explain why.

<CITE> using .boxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster

<PRE> using .boxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, 
text-indent, align, text-align, text, fonts, text styling, text styles, font styling,
tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS,
CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring,
programming, training, learning, beginners guide, primer, lessons,school,howto,references for
open source,website building,Webmaster

The next example uses the .foxer class and is designed to demo just how much you can control the styling of your boxes for text block tags like <div>, <p>, etc. Here we change the color, styling, and thickness of every border, change the padding on the right to 80px and even the text-align to right justify. Also it is encouraging to report that except for the <pre> and <cite> tags, all of the browsers delivered remarkably similar stylings. So the bottom line is that advanced, DTP-like text styling is available in most browsers.

<DIV> using .foxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster

Finally, we have applied the .boxer class to the <DL>, <DD>, <DT> and <TABLE>, <TR>, <TD> combo container tags to see how these tags would respond to Text Box stylings. In the case of <DL> with <DD> it appears that the inherited margin-left and margin-top settings help determine the final box positioning. In the case of the simple 1 cell table, it appears the border and padding stylings are picked up but the <table>'s own margin settings take precedence over the box model

<DL> with <DD> using .boxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster
1 Cell <TABLE> with .boxer
CSS, CSS 1, CSS 2 margin, padding, border, border style, border color, top, bottom, left, right, indent, text-indent, align, text-align, text, fonts, text styling, text styles, font styling, tutorial,html,dhtml,css,cascading stylesheets, stylesheets, targeting, selectors, text CSS, CSS text rules, CSS Text properties,xsl,xhtml,Javascript, Java, RIA, rich interfaces,dom,sql,authoring, programming, training, learning, beginners guide, primer, lessons,school,howto,references for open source,website building,Webmaster

Summary


The CSS Box model is fairly simple. The browsers implement it fairly uniformly for block tags like <div>, <p>, etc. However, for inline or spanning tags like <span>, <pre>, etc - the implementations by the browser vendors starts to vary. In the next tutorial we shall pick up on this notion of block versus inline or spanning tags. Users looking for more info on these CSS styles should check pages 92-103 inCSS in Easy Steps by Mike McGrath or several sections such as 255-268 in Beginning CSS by Richard York.

Top of Page  Tutorials Home  CSS references