Inline & Block Elements

CSS properties for inline and block elements

• I02a - (0:32)
  • Intro to block and inline elements.

Inline Elements

• I02b - (3:01)
  
  Example of the <em> tag which is an inline tag and the <strong> tag which is also an inline tag, both with the css background-color property applied.
  
  
  • Inline elements begin on the same line and do not cause a line break.
  • They flow horizontally.
  • They wrap.
  • Properties such as height, line-height and the top and bottom margins cannot be applied.
  • Width is as wide as the content and cannot be changed.
  • Confined to the area of the content.
  • Examples of inline tags:
    • <strong>
    • <em>
    • <a>
    • <img>
    • <input>
    • <span>

Block Elements

• I02c - (4:47)
• This sections background color is an example of the <ul> element, which is a block level element, which has a css background-color property applied to it.
• Block elements always begin a new row   ...except when overridden by display:inline;
• Will fill or control, by default, 100% of the width of the container that they are in (unless floated).
• Stack on top of each other.
• Usually have default margins top and bottom provided by the browser's internal stylesheet.
  • Note that when touching another block element's top or bottom margin, the two margins will collapse to the larger margin's size.
• Top and bottom margins and distance between rows of text can be specified.
• Examples of block level tags:
  • <p>
  • <h1>
  • <form>
  • <ul>
  • <div>
• Note that list items <li> is a unique element type.

This is another block element, the <h2> tag.

Introducing the <div> and <span> tags

• I02d - (3:00)
  • div tag
    • A block level tag.
    • An empty box container.
    • Does nothing by itself.
    • Has no inherent formatting.
    • Intended for use by CSS.
    • Needs css formatting applied to it or to have some content in order to be seen.
    • Usually used for identifying unique sections of a page for page composition and layout purposes by using the unique id attribute. For example: id="header"
  • span tag
    • An inline tag.
    • It also does nothing by itself.
    • Used for applying inline CSS formatting.
    • Also intended for use with CSS.
    • Needs content or CSS formatting to be visible.
    • Used, for example, for limiting CSS to specify the text color, font, or size of a single word in the middle of a line.

© 2014 Dan Hitchcock Vaughan and licensors