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,
- 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: