Inline Line box full solution for CSS inline elements

First read an article:

CSS box model: Everything is box-start with the line box

A row of boxes to see the picture speak

Represents a row box in a box model . The Line-height property sets the distance (row height) between rows. This property affects the layout of the row box. When applied to a block-level element

, which defines the minimum distance , not the maximum distance, between the baselines in the element.

The difference between the calculated values of the Line-height and Font-size (which becomes "line spacing" in CSS) is divided into two halves, which are added to the top and bottom of a text line content.

The smallest box that can contain the content is the line box. [ Source ]

Two box model continue to look at the picture

Represents the box in the CSS, each box (that is, all the elements are boxes, it is important to remember this, the following also discusses the inline non-replacement elements will ignore your

Values that are set by the browser) have height (height), width, padding (padding), Border (border),

Margin (margin) of the genus.

The classification of elements in three CSS

Elements are the basis of a document's structure, and in CSS, each element generates a box containing the contents of the Element (box, also translated as "box"). But different elements.

are displayed differently, such as <div> and <span>, and <strong> and <p> are not the same. In the document type definition (DTD), the

The same elements prescribe different types, which is one of the reasons why DTDs are important to documents. Source

1. Replacement and non-replaceable elements

   In terms of the characteristics of the elements themselves, they can be divided into substitution and non-replacement elements.

   • Replace element

     The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element .

     For example, the browser will read the image information according to the value of the SRC attribute of the tag and display it, and if the (X) HTML code is viewed, the actual content of the picture is not visible, for example, depending on the type property of the <input> tag, the input box is displayed. Or a radio button, and so on.

     X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, which is an empty element, such as:

     12	<input type= "Submit" name= "submit" value= "Submit"/>

     The browser displays these elements based on the label type and attributes of the element. The replaceable element also generates a box in its display.

   • non-replacement elements

     (X) Most elements of HTML are non-replaceable elements, meaning that their contents are directly displayed to the client (for example, browser ). For example:

     1	<span> non-replacement element </span>

     Paragraph <p> is a Replaceable elements, the contents of the text "paragraph" are all displayed.

3. displaying element block-level elements and inline elements

   In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

   • Block-level elements

     The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.

     Typical block-level elements are:<div>, <p>,

     The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.

     However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

   • In-line elements
     Inline elements do not form new chunks of content, that is, they can have other elements around them, such as <a>, <span>, <strong>, and so on, are typical inline-level elements.

     Elements with the display property equal to "inline" are all inline elements. almost all of the replaceable elements are inline elements, such as , <input>, and so on .

     However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.

Four Back to Line box

At ordinary times the block elements used more, but also more familiar with the elements in the line is really a place to contain text data, but also focus on the need to modify the place.

Again, all the inline elements (span,img,input) have all the attributes specified in the box model (width margin border padding), but some properties that are customized by CSS are not effective for some elements. This means that the browser ignores certain properties that you set.

• When you set the width, height, margin-top, Margin-bottom, Padding-top, non-replaced elements to the inline non-replacement element (inline, CSS properties such as Padding-bottom will be ignored by the browser
• Block-level element default width is the entire width of the parent element
• The default width of a floating element is the smallest width that can contain its contents

You can change the display property value by modifying the block element and inline element.
See the description of the Visual formatting model details in other cases

Transferred from: http://grow.sinaapp.com/?p=683

In the "CSS authoritative guide" P187 details the inline element within the line.

Basic term and concept for line layouts:

Anonymous Text Anonymous

This was any of the string of characters that was not contained the within an inline element. Thus, in the markup <p> i ' m <em>so</em> happy!</p>, the sequences "I ' M" and "happy!" a Re anonymous text. Note that the spaces was part of the text since a space is a character the same as any other. Notice that the spaces are also parts of the anonymous text.

Em box em.

This was defined in the given font, otherwise known as the character box. Actual glyphs can be taller or shorter than their EM boxes, as discussed in Chapter 5. In CSS, the value of font-size determines the height of each em box. The EM box is defined in the font, also called the character box. The actual glyph may be taller or shorter than its EM box, as discussed in chapter 5th. In CSS, Font-size determines the height of each em box.

Content area.

In nonreplaced elements, the content area can be one of the both things, and the CSS2.1 specification allows user agents to Cho OSE which one. the content area can being the box described by the EM boxes of every character in the element, strung together, or it CA n is the box described by the character glyphs in the element. In this book, I Use the EM box definition for simplicity ' s sake. In replaced elements, the content area was the intrinsic height of the element plus any margins, borders, or padding.

The content area can be either a box that contains the EM boxes in the elements, or a box that is described by the character glyphs in the element. In this book, the previous definition, the EM box definition, is used for simplicity. in the replacement element, the content area is the intrinsic height of the element +margin+border+padding.

Leading line spacing

The leading is the difference between the values of font-size and line-height. This difference are actually divided in half and are applied to the top and bottom of the content area. These additions to the content area is called, not surprisingly, half-leading. Leading is applied only to nonreplaced elements.

The line spacing is the difference between font-size and line-height. This difference is actually divided into 2 parts, applied to the top and bottom of the content area, respectively. It is not surprising that the 2 parts added for the content area are known as half-pitch (half-leading). Line spacing applies only to non-replacement elements.

Inline box inline boxes. (The book is so translated)

this is the box described by the addition of the leading to The content area. For nonreplaced elements, the height of the inline box of an element would be exactly equal to the value for  line- Height . For replaced elements, the height of the inline box of an element would be exactly equal to the content area since leading Is isn't applied to replaced elements.

This box describes by adding line spacing to the content area. For non-replacement elements, the height of the element's inline box is exactly equal to the value of line-height. For a replacement element, the height of the element's inline box is exactly equal to the height of the content area, because the line spacing cannot be applied to the replacement element.

 

Line box.

This was the shortest box that bounds the highest and lowest points of the the inline boxes that was found in the line. In other words, the top edge of the line box is placed along the top of the highest inline box top, and the bottom of the Line box is placed along the bottom of the lowest inline box bottom.

This is the smallest box that contains the highest and lowest points of the inline box that appears in the row, in other words, the top edge of the row box is at the top boundary of the highest inline box, and the bottom edge of the row box is placed in the bottom boundary of the lowest inline box.

CSS also contains a set of behaviors and useful concepts that fall out occurs in the above list of terms and definitions:

• The content area was analogous to the content box of a block-level element. The contents zone resembles a block-level element's contents frame.

• The background of an inline element was applied to the content zone plus any padding. The background of the inline element is applied to the contents area and all padding.

• Any border on a inline element surrounds the content area plus any padding and border. The bounding rectangle of the inline element encloses the contents and all padding and borders.

• Padding, borders, and margins on nonreplaced elements with no vertical effect on inline elements or the boxes they generat E That is, they does not affect the height of an element's inline box (and thus the line box, contains the Elemen T).

• Margins and borders on replaced elements does affect the height of the inline box for that element and, by Implicat Ion, the height of the line box for the contains the element.

One more thing to note:inline boxes is vertically aligned within the line according to their values for the property vertical-align. I touched on the Chapter 6, and this Chapter would explain it in more depth.

Before moving on, let's look at a step-by-step process for constructing a line box, which US pieces of the line fit together to determine its height:

2. determine the height of the inline box for each element in the line. This was done by:

   1. finding the values of  font-size  and  line-height  for Each of the inline nonreplaced element and text that's not a part of an inline ele ment and adding them together. The leading is split and applied to the top and bottom of the EM boxes.

   2. finding the values of  height ,   margin-top ,   Margin-bottom ,   padding-top ,   padding-bottom ,   border-top-width , and  border-top-bottom  for each replaced element and adding them together.

4. Figure out, for each content area, how much of it was above the baseline for the overall line and what much of it is below T He baseline. This isn't an easy task:you must know the position of the baseline for each element and piece of anonymous of text, and the Baseline of the line itself, and then line them all up. In addition, the bottom edge of a replaced element sits on the baseline for the overall line.

6. Determine the vertical offset of any elements that has been given a value for vertical-align. This would tell you what far off or down that element ' s inline box would be moved and would change how much of the element is a Bove or below the baseline.

8. Now this you know where all of the inline boxes has come to rest and calculate the final line box height. Just add the distance between the baseline and the highest inline box top to the distance between the baseline a nd the lowest inline box bottom.

Let's consider the whole process in detail, which are key to intelligently styling inline content.

I see the CSS3 documentation:

http://www.w3.org/TR/css3-box/#types

There is a piece of content:

4.2.Block-level boxes, containing blocks, flows and anonymous boxes

A block-level box is a box, which has a used value for ' Display ' of ', ', ', ', ' block list-item table table-* (i.e., all t Able boxes) or <template> . A block-level element is an element, all of whose top-level non-anonymous boxes are block-level.

An inline-level box is a box, which has a used value for ' Display ' of ', ', ' inline inline-block or ' inline-table ruby . [What's the other Ruby values?]

an anonymous box,  informally, is a box tha cannot be Addressed with CSS selectors . All it properties, except for ' display ', has their default values (either the initial value or inherited). Anonymous boxes is created when the CSS box model requires a Child box with a t    Certain value for ' display ', and the child actually have a different value. In this case a anonymous box of the right kind was created and wraps the child (or children). other modules (e.g.,  [Css3tbl] ,   [Css3text] ) may also define anonymous boxes. The anonymous boxes defined by this module is the following:

• A block-level box may contain either line boxes or block-level boxes, and not both. If necessary, any line boxes the belong to this box ' s element is wrapped in one or more (as few as possible) anonymous B Oxes with a ' display ' of ' block . A block-level box can contain either a line box or a block-level,2 cannot be simultaneously. If necessary, the line box will be included in your block element.

An example of the last point above are this document fragment:

<p>somebody whose name I Haveforgotten, said, long ago: <q>a Box Isa box,</q> and he probably meant it.& Lt;/p>

With these style rules:

P {display:block}q {display:block; margin:1em}

pthe element has both line boxes and a child box q for the element, which is a block-level element. The line boxes before the is wrapped in a q anonymous block-level box and so is the line boxes after the q . The resulting tree of boxes might is as follows (refer to the figure):

• Block-level box [P]
  • Block-level box [Anonymous]
    • Line box: "Somebody ..."
    • Line box: "Forgotten ..."
  • Block-level Box [Q]
    • Line box: "A Box ..."
  • Block-level box [Anonymous]
    • Line box: "And he ..."

Figure3: Whenthe fragment is rendered, the text before the "Q is Wrapped" in a anonymous block and the text after the Q In another.

In-depth reference: http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7% a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/