CSS Basics 106 - Basic Block Content Box

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

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

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.

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 
        

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