[Quicky] What is the difference between block and inline?

Source: Internet
Author: User

Hiya ~ Me again

Before developing and managing style sheets, I want to insert a small knowledge. A few days ago, I checked the Web standard design group and asked Zhu youkang about the differences between block and inline. I remember that people often asked such questions in the past. domestic forums and foreign forums seem to be confused about what the two are. Think about the fact that many people will make some common mistakes here, so let's just open an articleArticleLet's talk about block and inline.

-Concepts should be discussed before presentation.

Here I want to emphasize,ConceptIt is very important in front-end development ~

Many people may think that you can just create a style and place it on the left and right. But in fact, there are some very difficult situations. You need to respond to these situations. The solution depends on many factors, one of which is inspiration and the other is a deep understanding of the concept.

Here, we need to clarify the concept of block and inline?

In fact, the block and inline concepts are mentioned in three completely different parts of the Golden shining bling specification. Maybe this is why so many people will feel confused = V =

-Block-level elements vs inline Elements

The first part of the concept of block and inline is in the HTML specification. To be exact, it should beBlock-level elements (Block-level element)AndInline elements (Inline element):

All elements that are allowed to be contained by the body element are either block-level or Inline. They can be counted as block-level or inline. But there is absolutely no element that can be contained by the body, that is, it is not a block-level, not an inline element.

Common block-level elements include Div, form, table, P, pre, H1 ~ H6, DL, ol, UL, etc.

Common inline elements include span, A, strong, em, label, input, select, textarea, IMG, and BR.

In addition, the script, object, MAP, button, Del, and INS elements can be both block-level elements and inline elements.

 

What are the differences between block-level elements and inline elements? It is embodied in the following aspects:
  • Generally, block-level elements can contain block-level elements and inline elements, but inline elements can only contain inline elements. Note that,Each specific element can contain specific elements. Therefore, this rule is not applicable to individual elements..

    For example, P elements can only contain inline elements, but cannot contain block-level elements.

      1:   
             
    2: <P> <Div>Text</Div> </P>
     
    3:
      4:   
             
    5: <P> <Span>Text</Span> </P>

  • Another difference is in display. Block-level elements are usually separated by reality, and both sides are replaced by a line. inline elements do not generate line breaks, and a series of inline elements are displayed in a line. However,The final result is that the page displays a style sheet, not the element itself.. It is estimated that this rule is mostly made to enable browsers that appear above the specifications to justify themselves.

    For example, we know that the default display layout of table elements uses a unique set of display: Table rules, while the BR element is essentially a line feed. Even a DIV, you can use a style sheet to directly specify the display: inline, so this rule is useless.

  • What are the essential differences? In fact, the most essential difference is --In a strict DTD, the body element can only contain block-level elements, but not inline elements.. Maybe you want to ask, isn't the element contained in the body either block-level or Inline? Why is there no inline? Very simple-because in the transitional DTD, the body can also contain inline elements.

    Let's take a look at the specific example:

      
             doctype   HTML   Public  "-// W3C // dtd xhtml 1.0 strict // en " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > 
    <Html Xmlns= "Http://www.w3.org/1999/xhtml">
     
    <Head>
        meta   HTTP-equiv   =" Content-Type "  content   =" text/html; charset = UTF-8 " />  
    <Title>Block-level vs inline demo</Title>
     
    </Head>
     
     
    <Body>
     
     
    <! -- This is wrong -->
     
    <IMG SRC= "/Someimage.png" Title= "An image" ALT= "An image" />
     
     
    <! -- You must do this before you can -->
        P  >  IMG   SRC   ="/someimage.png "  title   =" an image "  alt   =" an image " />   P  > 
     
     
    </Body>
     
    </Html>

     
    <!Doctype Html Public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <Html Xmlns= "Http://www.w3.org/1999/xhtml">
     
    <Head>
        meta   HTTP-equiv   =" Content-Type "  content   =" text/html; charset = UTF-8 " />  
    <Title>Block-level vs inline demo</Title>
     
    </Head>
     
     
    <Body>
     
     
    <! -- If you change a DTD, it will all be OK. -->
     
    <IMG SRC= "/Someimage.png" Title= "An image" ALT= "An image" />
        P  >  IMG   SRC   ="/someimage.png "  title   =" an image "  alt   =" an image " />   P  > 
     
     
    </Body>
     
    </Html>

-Block box vs inline box

You should have some knowledge about the CSS box model. The content layout on the webpage is implemented by controlling box.

In the css2.1 specification, controlling box is divided into three types: block box and inline box, which are not widely supported so far. This is where block and inline are mentioned in the second part of the Specification. The content on the webpage, whether surrounded by tags or the display mode, is finally calculated as a controlling box and applied layout rules.

Fortunately, this process is transparent for front-end development. You don't have to consider it, but you just need to consider the differences between the two boxes.

    • In a normal layout, the block box is separated from top to bottom, and the inline box is from left to right (or from right to left due to the setting of direction, or from top to bottom.
    • Inline box does not respond to vertical attributes such as margin, width, height, max/min width/height. block box can respond to these attributes.

This is basically the case for common use.

-Display: block vs display: inline

Here is the last place where block and inline are mentioned. Unlike the other two places, block and inline are not the unique values of the display attribute. In the css2.1 specification, the value of the display attribute can be any of the following: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit.

In general, display: block allows elements to generate a block box, while display: inline generates an inline box. For the differences between the two, see the previous section.

-If you are interested

Think about whether the Li element is block level or inline ~

The results will be published tomorrow. So, let's go here.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.