Inline-Level Content: What It Is, How It Works & How to Use It

In inline layout, a mixed stream of text, replaced elements , and other inline boxes are laid out by fragmenting them into a stack of line boxes. Within each line box, inline-level boxes are aligned to each other vertically or horizontally, depending on the writing mode. Typically, they are aligned by the baselines of their text. This can be changed with CSS.

inline layout

Note: HTML (HyperText Markup Language ) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.

Examples

html

                                        
                                            
                                                
                                                    <
                                                    p
                                                
                                                >
                                            
                                            This span is an 
                                            
                                                
                                                    <
                                                    span
                                                
                                                class
                                                
                                                    =
                                                    "
                                                    highlight"
                                                
                                                >
                                            
                                            inline-level element
                                            
                                                
                                                    </
                                                    span
                                                
                                                >
                                            
                                            ; its
background has been colored to display both the beginning and end of the
element's influence. Input elements, like 
                                            
                                                
                                                    <
                                                    input
                                                
                                                type
                                                
                                                    =
                                                    "
                                                    radio"
                                                
                                                />
                                            
                                            and

                                            
                                                
                                                    <
                                                    input
                                                
                                                type
                                                
                                                    =
                                                    "
                                                    checkbox"
                                                
                                                />
                                            
                                            , are also inline-level content.

                                            
                                                
                                                    </
                                                    p
                                                
                                                >

In this example, the <p > element contains some text. Within that text is a <span > element and two <input > elements, which are inline-level elements. If the <span > is spread across two lines, two line boxes are generated. Because these elements are inline, the paragraph correctly renders as a single paragraph of unbroken text flow:

                                        
                                            body
                                            {
                                            margin
                                            :
                                            0;
                                            padding
                                            :
                                            4px;
                                            border
                                            :
                                            1px solid #333;
                                            }
                                            .highlight
                                            {
                                            background-color
                                            :
                                            #ee3;
                                            }

Inline-Level Content

Examples

See also