will be a certain number of pixels high and wide. A replaced element can cause a line box to become taller or higher than normal. This does not change the line height for any element in the line.Examples of inline elements are em and a which are non-replaced elements, and img which is a replaced element. They are treated somewhat differently and so have different sections on this page.
Here is a paragraph, a block element, that contains a span, span being the generic non-replaced inline element. The span has a black dashed border applied to it. As is probably obvious, inline elements can spread over multiple lines.
Here are a couple of other examples where the span element starts immediately after the p element. Each span has the same background colour because each one uses the same style. Each paragraph has a different value for text-align. Notice the block element stretches from left to right in the browser window regardless of the position of the text, and notice the inline element style (the background colour) is applied only to the text included it.
Here are a couple of other examples where the span element starts immediately after the p element. Each span has the same background colour because each one uses the same style. This paragraph has the attribute text-align: left.
Here are a couple of other examples where the span element starts immediately after the p element. Each span has the same background colour because each one uses the same style. This paragraph has the attribute text-align: right.
Here are a couple of other examples where the span element starts immediately after the p element. Each span has the same background colour because each one uses the same style. This paragraph has the attribute text-align: center.
Here are a couple of other examples where the span element starts immediately after the p element. Each span has the same background colour because each one uses the same style. This paragraph has the attribute text-align: justify.
For a non-replaced element, the value of the font-size determines the height of the content area. If a line-height is specified then half the difference between the font-size and the line-height is applied above the content box and half below.
For a non-replaced element, the value of the font-size, in this case 16 px, determines the height of the content area. If a line-height, in this case 26 px, is specified then half the difference between the font-size and the line-height is applied above the content box, 5 px, and half below, the other 5 px. Each line of content has 5 px of space above it and 5 px below.
As you may recall from other places, line-height is inherited. The font-size of the strong inline elements in the previous paragraph is 26 px, the same as the line-height. Note that the line-height does not adjust. If you look carefully you will realize the margins of the content area have shifted to make room for the larger type.
There is another attribute that can be used to position inline elements vertically. It is called, appropriately enough vertical-align. It can accept values using length measurements, percent, px, pt, etc. or with certain key words: top, bottom, text-top, text-bottom, middle, super, sub. Here are two examples, the first using a length unit and the second a key word.
There is another attribute that can be used to position inline elements vertically. It is called, appropriately enough vertical-align. It can accept values using length measurements, in this case 6 px or with certain key words: top, bottom, text-top, text-bottom, middle, super, sub. Both these paragraphs have font-size: 14px and line-height: 30px
There is another attribute that can be used to position inline elements vertically. It is called, appropriately enough vertical-align. It can accept values using length measurements, or with certain key words, in this case: top. Both these paragraphs have font-size: 14px and line-height: 30px
Inline replaced elements are assumed to have a built-in (intrinsic) height and width. For example, an image will be a certain number of pixels high and wide. A replaced element can cause a line box to become taller or higher than normal. This does not change the line height for any element in the line. Here is an example.
Inline replaced elements are assumed to have a built-in (intrinsic) height and width. For example, an image will be a certain number of pixels high and wide. A replaced element can cause a line box to become taller or higher than normal. This does not change the line height for any element in the line.
Inline replaced elements are assumed to have a built-in (intrinsic) height and width. For example, an image will be a certain number of pixels high and wide. A replaced element can cause a line box to become taller or higher than normal. This does not change the line height for any element in the line. The vertical alignment of a replaced element can be adjusted using vertical-align. Here the image is shifted by 50%.
Inline replaced elements are assumed to have a built-in (intrinsic) height and width. For example, an image will be a certain number of pixels high and wide. A replaced element can cause a line box to become taller or higher than normal. This does not change the line height for any element in the line. The vertical alignment of a replaced element can be adjusted using vertical-align. Here the image is shifted by -16px.
By default replaced elements sit on the baseline of the content box.Any vertical alignment shifts are relative to the baseline.
It is possible to alter the way elements show in the browser window using the attribute display. It has a long list of possible values, many are directly related to tables, others to lists and are discussed in those files. In this section we will examine block, inline, inline-block. There is very little browser support for a fourth value, run-in, at the present so it will not be discussed here.
Using the display attribute changes only how elements appear in browsers. It does not change their nature. For example, making anchors (an inline element) display as block elements does not make anchors block elements.
Let us use that example for our first example of the use of display. Assume we have a series of links that need to be displayed in a column for navigation purposes. We could put each link in a paragraph, which uses a lot of space, or put a line break between each item, which becomes messy if we want to change the orientation later. Or we could make each anchor a block element using the display attribute. Using H4 as the main block element, here is what we start with.
Now apply a style to A which makes each anchor display as a block element.
In the same way we can change the display of a series of block elements into inline elements. Here is a list of names for example.
Then apply a style to the list that makes each list item an inline element in display. (I added a few other style changes to make the items look nicer when placed in a straight line.)
The inline-block value is a hybrid of inline and blcok as its name suggests. It is positioned like an inline replaced element (on the baseline, will not contain a line break) and its content is formatted as a block element.
This is a paragraph, a block element displaying as we would expect.
Neither the div nor the p have any special formatting applied to them. The div ends here.This is a paragraph, a block element displaying as an inline element.
This is the rest of the div, still a block element, and it ends here.This is a paragraph, a block element displaying as an inline-block element.
This is the rest of the div, still a block element, and it ends here.