Replaced Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Replaced elements are the kind of elements whose shape, dimensions and appearance are controlled by external factors and resources. This is probably not the best definition for replaced elements but once you read the example, it’ll make sense to you. For example, <img> is a replaced element. When you write an img element in an HTML document, you either

  • write the images width and height or
  • you write neither of them or
  • you write one of them

In the first case, the width and height with which the element is going to be rendered in, in the view port is going to be dictated by the values specified for the width and height properties of the img tag. If the values don’t match those of the external image’s, then the rendered image is going to be proportionally distorted. If the entered value match exactly those of the external images’, the image is going to rendered proportionally correct.

In the second case, the height and width with which the image is going to be rendered is going to be the exact height and width of the image itself.

In the third case, the browser is going to take care of the proportions. For example if the height of the original external image is 100px and you write 50px as the height attribute, that’s 50% of the height of the original image. As a result of that, the width of the rendered image is going to be 50% of the actual width of the external image.

So as you can see, in these cases, the dimensions of the rendered box is going to be influenced by the dimensions of the source external image (to some extent). That is one good example of a replaced element.

A good way to remember replaced elements is that replaced elements are the kind of elements like <img> that will be replaced by an external content source like an image.

With replaced elements, there are two points that you should remember:

  • You cannot use generated content with them. (More about generated content later – not very important at this point)
  • Replaced elements usually have some sort of default dimension in every browser under each operating system and of course depending on the device as well. So if you had a “textarea” and applied some CSS rules to it to give it a fixed width, the width of the “textarea” would default to the default width for that browser if the CSS didn’t load for any technical reason.

Examples of replaced elements are,

  • img
  • object
  • video
  • textarea
  • input
  • audio (in some cases)
  • canvas (in some cases)

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Inline-block Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Inline-block boxes can be generated with the following CSS property:

display: inline-block;

Here’s are some important characteristics of inline-block boxes:

Inline-block boxes are just like inline boxes, in that they don’t take up the whole view port width. They take up only as much width as there’s content inside them.

In order to control the different box model properties of inline-block elements and boxes, you basically use the classical box model (the usual width, height, margin, border and padding) that you normally would use in case of normal block-level boxes.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Inline Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

To know about the difference between “elements” and “boxes”, please go to Block-level Elements and Boxes. If you’ve landed on this page from within the course page, then you must have already read that part.

Here’s the important characteristics of inline elements that you should understand:

  • As opposed to block-level elements like p, inline elements generate the kind of boxes that get only as wide as the content inside them.
  • As opposed to block-level boxes, inline boxes don’t have an integrated line breaking mechanism. That means, they do not start on a new line, nor do them break their own line.
  • Inline elements can contain text and other inline elements but no block-level elements.

Here’s a list of a few famous inline elements:

  • a
  • b
  • big
  • i
  • small
  • tt
  • abbr
  • acronym
  • cite
  • code
  • dfn
  • em
  • kbd
  • strong
  • samp
  • time
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • q
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Block-level Elements and Boxes

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

As the title of this post suggests, there are,

  • Block-level elements, and,
  • Block-level boxes

The term “element” refers to to source code that you write. The term “box”, on the other hand, refers to how that element is represented on the browser view port.

For example, when you write an HTML p tag in your HTML document and write some text between the opening and closing p tags, the whole combination of the opening p tag, the closing p tag and the text inside the tags is rendered or represented in a specific way in the browser view port. Among other characteristics, the text starts on a new line; the paragraph takes up the whole view port width, no matter how wide the browser windows is at the moment,  and no matter how much content the p tag has. Moreover, the next box starts on the next line in the view port.

The whole content of the p tags (the text) and the way the paragraph is represented in the viewport can be resembled to a box on the view port and hence the term “box”. You could therefore say that a box is the representation of an HTML tag and its contents in the view port. You’ll see this and we’ll explain it more in the video related to this lecture (see the course description below).

Now there are some characteristics of block level elements and boxes that you should be familiar with, especially if you want to create layouts, using HTML and CSS.

Block-level boxes, created from block-level elements in your HTML source code, always begin on new lines and break their own line. That means a p tag and all of its contents start on a new line and the next element in the code starts from the next line even if there’s still free space on the line not filled by the p tag contents.

Block-level elements can contain other block-level and inline elements. We’ll learn more inline elements later. For example, you can have a paragraph (opening and closing p with some text as its content) and inside the paragraph, you can have another same combination like the following:

<p>Lorem Ipsum is simply dummy<p>a block-level element inside another block-level element</p>  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>

block-level and inline  distinctions and terminology have been replaced with other terminology in HTML5 like “flow content”, “phrasing content”, etc. We’ll deal with them in another course. Those older specifications that we’re dealing with right now are covered in HTML specifications up to 4.01. As a web developer you need to know the older specifications as well since you’re still going to have to work with them at least in next 5 years to come.

Here’s a list of some block-level elements:

  • address
  • figure (HTML5)
  • noscript
  • article (HTML5)
  • footer (HTML5)
  • ol
  • aside (HTML5)
  • form
  • output (HTML5)
  • blockquote
  • h1, h2, h3, h4, h5, h6
  • p
  • br
  • header (HTML5)
  • pre
  • canvas (HTML5)
  • hgroup (HTML5)
  • section (HTML5)
  • dd
  • hr
  • table
  • div
  • li
  • tfoot
  • dl
  • main
  • ul
  • fieldset
  • nav
  • video (HTML5)
  • figcaption (HTML5)

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address: