How In-Line Elements Are Mixed in Text Lines

Q

How In-Line Elements Are Mixed in Text Lines? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

✍: FYIcenter.com

A

If an in-line element is mixed in a text line, it will be placed immediately after the preceding character. The vertical position of the in-line element will be determined by its vertical alignment style property, vertical-align, as shown in the following tutorial exercise:

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#box {width: 300px; height: 300px; 
    font-size: 14px; 
    line-height: 30px;
    background-color: #ddddff}
  STRONG {font-size: 30px;
    line-height: 60px;
    background-color: #ffffff}
  EM {font-size: 30px;
    line-height: 60px;
    vertical-align: top;
    background-color: #ffffff}
  TD.legend#w30 {height: 30px; background-color: #ffffff}
  TD.legend#w60 {height: 60px; background-color: #ffffff}
  TD.legend#g30 {height: 30px; background-color: #dddddd}
  TD.legend#g60 {height: 60px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Text Paragraph with In-line Elements</H1>
<table id=out><tr>
<td id=box><p id=box>
Welcome to <strong>FYIcenter</strong>.com, the resource
center for visitors like you! Hope you like it,
and come back again. Submit your favor resources
to <em>FYIcenter</em>.com to share with others. 
Remember to tell your friends about FYIcenter.com.
</p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=g60>- line 1</td></tr>
<tr><td class=legend id=w30>- line 2</td></tr>
<tr><td class=legend id=g30>- line 3</td></tr>
<tr><td class=legend id=w60>- line 4</td></tr>
<tr><td class=legend id=g30>- line 5</td></tr>
<tr><td class=legend id=w30>- line 6</td></tr>
</table></td>
</tr></table>
<p align="right">By FYIcenter.com</p>
<div></body></html>

Save this document as inLineElements.html, and view it with a browser, you will see that in-line elements are vertically aligned at the bottom. If the in-line element is a text string, its line-height specifies the full height including margins. See the following image for details:

2007-05-09, 6137👍, 0💬

What Is the Text Paragraph Formatting Model
What Is the Text Paragraph Formatting Model? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements A text paragraph is divided into lines to for a stack of line boxes. Each line box is a rectangular with a line height and sharing the same width as the content box of the enclos... 2007-05-11, 6745👍, 0💬

How In-Line Elements Are Mixed in Text Lines
How In-Line Elements Are Mixed in Text Lines? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If an in-line element is mixed in a text line, it will be placed immediately after the preceding character. The vertical position of the in-line element will be determined by it... 2007-05-09, 6138👍, 0💬

How In-line Elements Affect Line Box Heights
How In-line Elements Affect Line Box Heights? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If a line box contains only text without any in-line elements, its height is equal to the line-height property of the enclosing block element. If a line box contains text mixed ... 2007-05-09, 5694👍, 0💬

What Are the Background Properties of a Block Element
What Are the Background Properties of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements The background of a block element can be formatted in different ways: Transparent to show the background of the parent element. Non-transparent background with a specif... 2007-05-11, 5494👍, 0💬

How To Add Images to Backgrounds
How To Add Images to Backgrounds? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements One image can be specified to the background at a particular position. It can also be repeated in horizontal direction, vertical direction, or both directions with the following style prope... 2007-05-11, 5253👍, 0💬

How Nested Block Elements Are Formatted
How Nested Block Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules If a block element is nested in another block element, the inner block, child block, will be formatted as the content box of the outer block, parent block. The HTML and CSS document below shows... 2007-05-11, 5249👍, 0💬

Is FORM a Block Element
Is FORM a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements Is <FORM> a block element? The answer is yes. <FORM> is behaves like a <P>. Below is a good example of a floating block element and a floating inline element: <html>&... 2007-05-11, 5210👍, 0💬

How In-line Elements Are Formatted Side by Side
How In-line Elements Are Formatted Side by Side? - CSS Tutorials - Understanding Multiple Element Formatting Rules If in-line elements are coded next to each other, they will be formatted side by side in a line box. Their individual widths and heights will be respected. Their relative vertical posit... 2007-05-11, 5200👍, 0💬

How Many Ways Can Elements Relate to Each Other
How Many Ways Can Elements Relate to Each Other? - CSS Tutorials - Understanding Multiple Element Formatting Rules From a formatting point of view, HTML elements can relate to each other in the following ways: Line up side by side - In-line elements coded next to each other are formatted side by sid... 2007-05-11, 5027👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.