The impact of inline elements, block-level elements and internal and external margins_html/css_WEB-ITnose

Inline elements and block-level elements

Block-level elements (block):

1. 1. New line starts;
   2. Height, Line height as well as margins and padding can be controlled;
   3. The default width is 100% of its container
   4. Inline elements and other block elements can be nested
   5. Commonly used block-level elements: div, h1~h6, dl, ul, ol

Inline elements (inline):

1. 1. and other elements are on one line;
   2. width It is the width of its text or picture, which cannot be changed
   3. Inline elements can only accommodate text or other inline elements
   4. Commonly used inline elements: a, span, img, input, label, select, strong, textarea

where the inline elements There are some main points to pay attention to in width, height and inner and outer margins

<input type="text"><input type="text" style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;" value="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;"><input type="text">

Display effect:

And:

<span>第一个</span><span style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;">第二个</span> <span>第三个</span>

Display effect:

=> are both inline elements, why You can set the width, height, and inner and outer margins, but what about ?

This is because:

There are two types of inline elements: replaced elements and non-replaced elements

Replaced elements:

Replaced elements That is, the browser determines the specific display content of the element based on the element's tags and attributes.

For example, the browser will read the image information and display it based on the value of the src attribute of the tag, while just points to an image file, such as the type of the tag. Properties to determine whether to display input boxes, radio buttons, etc.

Non-replacement elements:

refers to elements whose content is included in the document.

For example, if the text content of a paragraph is placed within the element itself, the paragraph is a non-replacement element.

To discuss whether inner and outer margins work on inline elements, we need to discuss inline replacement elements and inline non-replacement elements separately:

1. Explicitly apply margins to inline elements
2. Applying margins to an inline non-replaced element has no effect on line-height
3. Applying margins to an inline non-replaced element When the inner margins are applied to the element, it will have no effect on the line-height. However, when the left and right margins are applied, it will have an impact on the display effect. Therefore, you can set padding-left/right, margin-left/ right

   <style type="text/css">        #two{            background-color: red;            width:100px;               margin-right:50px;            padding-left:50px;        }    </style>    <span id="one">1111</span>    <span id="two">2222</span>    <span id="three">3333</span>

   
   Effect:

4. When an inline non-replacement The element applies margins. Since its margins are transparent and the line height has no effect, no visual effect is displayed. However, when it is colored, since the inner margins are non-transparent, the effect can be displayed

<style type="text/css">        #two{            background-color: red;            margin-top:50px;            padding-bottom: 50px;        }    </style>    <span id="one">1111</span>    <span id="two">上下对行高均无影响，但padding可显色</span><br />    <span id="three">除去行高区域外均不占文本流空间</span>

Effect:

5. For an inline replacement element, the inner and outer margins set for it are actually set for the replacement element. , will affect the size margin of the replaced element, thereby affecting the line height, so margin and padding can be set