Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

By: FYICenter.com

Part:   1   2  3  4  5  6  7  8  9 

A collection of 21 FAQs/tutorials tips on HTML formatting models. Clear answers are provided with tutorial exercises on block and inline elements, specifying padding spaces and margins, specifying border width and color, transparent and non-transparent backgrounds, positioning background images, line boxes and text paragraphs, setting line height. Topics included in this collection are:

  1. What Is the HTML Element Formatting Model?
  2. What Are the Formatting Behaviors of HTML Elements?
  3. What Is a Block Element?
  4. What Is Inline Element?
  5. What Is a Floating Element?
  6. Hot To Specify the Content Box Size of a Block Element?
  7. Hot To Specify the Padding Spaces of a Block Element?
  8. Hot To Test Padding Spaces on All 4 Sides?
  9. How To Specify Borders of a Block Element?
  10. Hot To Test Borders with Different Widths, Styles, and Colors?
  11. How To Specify Margin Spaces of a Block Element?
  12. Hot To Test Margin Spaces on All 4 Sides?
  13. How To Specify Is the Color of the Margin Area?
  14. How To Specify Is the Color of the Padding Area?
  15. What Are the Background Properties of a Block Element?
  16. How To Set Background to Transparent or Non-transparent?
  17. How To Add Images to Backgrounds?
  18. What Is the Text Paragraph Formatting Model?
  19. How In-Line Elements Are Mixed in Text Lines?
  20. How In-line Elements Affect Line Box Heights?
  21. Is FORM a Block Element?

What Is the HTML Element Formatting Model?

An HTML document is divided into HTML elements. Each element is considered as a formatting unit using a box-oriented formatting model, which has:

  • Content Box - A rectangular area for displaying the element content.
  • Padding Box - A rectangular area surrounding the content box acting as padding space.
  • Border Box - A rectangular area surrounding the padding box acting as border lines.
  • Margin Box - A rectangular area surrounding the border box acting as margin space.

The diagram below shows you the content box of a paragraph and the surrounding layers:
           

What Are the Formatting Behaviors of HTML Elements?

From a formatting behavior point of view, HTML elements can be divided into 2 categories:

  • Block Element - Formatted as a rectangular block occupying the entire width of the parent content box. For example, <P> is block element.
  • Inline Element - Formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. For example, <IMG> is an inline element.

What Is a Block Element?

A block element is formatted as a rectangular block occupying the entire width of the parent content box. Examples of block elements are:

  • <P> - A paragraph of text and/or inline elements.
  • <PRE> - A paragraph of text with white spaces preserved.
  • <LI> - A list item. Identical to <P; except that it has list-item marker on the left.
  • <TABLE> - A table of cells. Each cell is identical to <P>
  • <FORM> - An input form. Identical to <P> except that it has no margins.
  • <DIV> - A container to group elements into a block element.
  • <H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
  • <HR> - A horizontal ruler.

What Is Inline Element?

An inline element is formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. If the width of the parent content box is reached, it will be wrapped to start a new line. One or more lines of in-line elements become a block element. Examples of inline elements are:

  • <IMG> - A tag to insert an image into the current line.
  • <STRONG> - A tag to make the text stronger.
  • <EM> - A tag to emphasize the text
  • <INPUT> - A tag to allow user entering input data to a form.
  • <SPAN> - A container to group inline elements into a unit.
  • <A> - A tag to create a hyper link.
  • <BR> - A tag to break the current line.

(Continued on next part...)

Part:   1   2  3  4  5  6  7  8  9 


Selected Developer Jobs:

More...