What are the differences between function block and inline?

The difference between block and inline

block is also called block-level element, inline is also called inline element

1. Block-level elements
   

• Occupy a separate line Each block-level element is the beginning of a new line

• The default width is 100%

• You can set the width and height and you can set the margin and padding attributes.

Inline elements

• #Can be placed on the same line as other inline elements without newline characters before or after the element The width, height, and width cannot be set. The display setting is invalid after being filled with the internal content.

• Block-level elements cannot be nested inside

• No It can be said that setting the width and height img input textarea select is also an inline element. It can be said that setting the width and height is a replacement element.

• The replacement element means that the browser determines the specific content of the element based on its tags and attributes. Display content. Replacement elements generally have intrinsic dimensions, so they have width and height that can be set.

• Only margin-left margin-right padding-left padding-right can be set, that is, the horizontal direction, the vertical direction is invalid

Block-level elements and inline elements can change each other by specifying display

---

Commonly used block-level elements
　◎ blockquote - block quotation
　◎ dir - directory list
　◎ p - Commonly used block-level elements
　◎ fieldset - form is equivalent to GroupPanel
　◎ form - form
　◎ h1 - Big title
　◎ h2 - Subtitle
　◎ h3 - Level 3 title
◎ h4 - Level 4 heading
◎ h5 - Level 5 heading
◎ h6 - Level 6 heading
◎ hr - Horizontal separator line
#　◎ pre - formatted text to output the text according to the input format
　◎ table - table
　◎ ul - non-sorted list

Commonly used inline elements

◎ a tag

◎ b - bold
◎ br - line break
◎ cite - quote
◎ code - code
◎ em - emphasis
Recommended)
　◎ i - italics
　◎ img - picture
　◎ input - input box
　◎ label - table label
　◎ q - short quote
　◎ select - item selection
◎ small - small font text
◎ span - commonly used inline container, defining blocks within text
◎ strong - bold emphasis
◎ sub - subscript
◎ sup - superscript
　◎ textarea - multi-line text input box

Width and height margin padding of inline elements Difference verification

---

Style:

        span,a{            
        width:100px;            
        height:500px;        
        }

        span,a {            
            margin-top:50px;            
            margin-right:150px;            
            margin-bottom:50px;            
            margin-left:150px;            
            padding-left:10px;            
            padding-right:10px;            
            padding-top:100px;            
            padding-bottom:100px;            
            border:1px solid yellow;            
            background-color:#d1d5d3;        
        }
        
        #p3,#p4{            
            width:400px;            
            height:200px;            
            background-color:black;        
        }

Structure:

    <p id="container">
        <span>我是span </span>
        <a href="#">我是a</a>
        <p id="p4">p4</p>
    </p>

Result:

1. Verify that the margin is only valid in the horizontal direction

2. Verify that the padding is only valid in the horizontal direction and does not affect others in the vertical direction Black p

in the element diagram

The above is the detailed content of What are the differences between function block and inline?. For more information, please follow other related articles on the PHP Chinese website!