Css-inline (in-row) elements, block elements, margin, and padding

Css-inline (in-row) elements, block elements, margin, and padding

Features of block elements:

Always starts on a new line;
Height, row height, and top and bottom margins can be controlled;
The default width is 100% of its container unless a width is set. <Div>, <p>,

Features of the inline element:
And other elements are on one line;
High, the Row Height and top and bottom margins cannot be changed;
The width of a text or image cannot be changed. <Span>, <a>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

Let's take a closer look at their situation.
Block element)It is generally a container element of other elements. Block elements generally start from a new line and can accommodate inline elements and other block elements. Common block elements are section tags 'P ". The "form" block element is special. It can only accommodate other block elements.
If no css function is available, the block elements are arranged in the order of each row. With css, we can change the default layout of html and place block elements in the desired position. Instead of just starting another line. It should be noted that table labels are also a type of block elements. table based layout and css based layout are from average users (excluding persons with visual impairment and blind people) the two la s have no difference except the page loading speed. However, if a common user inadvertently clicks the page source code button, the difference between the two is very large. The css layout page source code, designed based on a good refactoring concept, can at least allow common users without web development experience to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
You can think of the block container element div as a box, or it is easier to understand if you have played the clipboard. First, we cut down the necessary articles from various newspapers and magazines. Each piece of cut is a block. Then we pasted the paper block to a blank new paper with glue based on our typographical intent. This forms your own unique digest Express. As an extension of technology, webpage layout design follows the same pattern.
Inline element)It is generally a basic element based on the semantic level (semantic. Inline elements can only contain text or other inline elements. Common inline elements are "".
It should be noted that the Chinese name of inline element has multiple inline elements, embedded elements, in-line elements, and straight-forward elements. Basically, there is no unified translation. What do you call love. When we mention inline elements, we will think of a display attribute: display: inline; which can fix the famous IE Double Floating boundary.
Both block element and inline element are concepts in the html specification. The basic difference between block elements and inline elements is that block elements generally start from a new line. After css control is added, the attribute differences between block elements and inline elements will not be different. For example, we can add the inline element cite to the display: block attribute so that it also has attributes starting from the new line each time.

A: an element in A row can only be placed in A row. A block-level element is A four-square block that can be placed anywhere on the page.

B: To put it bluntly, an element in a row is like a word. A block-level element is like a paragraph. If it is not defined separately, it will appear on an independent line.

C: general block-level elements, such as paragraphs <p> and question mark

D: The block-level element-less feature is that each block-level element is displayed from a new line, and the subsequent element-less elements must be displayed in another line.

E: <span> the CSS definition belongs to an element in the row, and <div> is a block-level element.
Using the word container makes it easier to understand their existence and usage. The element in the row is equivalent to a small container, while <div> is equivalent to a large container, of course, a large container can be placed in a small container. <Span> is a small container.
Block elements are generally the container elements of other elements. block elements generally start from a new line and can accommodate inline elements and other block elements, the common block element is the section label 'P ". The "form" block element is special and can only be used to accommodate other block elements.

Display: inline
It enables the element displayed as a block in the row to be displayed in the row, for example
DIV1
DIV2
Here, DIV1 and DIV2 occupy one row respectively, but the attributes you added to them have changed.
DIV1 DIV2
DIV1 and DIV2 are displayed on the same line.
Which corresponds to display: inline? Display: blockBlock changes the HTML Tag that applies the CSS attribute to block-level elements. For example, SPAN is displayed in the row, but the display: block attribute is different.
[Font style = "display: block"] SPAN1 [/font]

A block generally occupies one row, unless float

Inline is automatically arranged as a line, just like the text in the paragraph, can be divided into multiple lines.

Display: the typical use of inline is in <li> under <ul>.

Display: inline is not displayed as display: none

Display: The corresponding block is not displayed as hidden

PopularityElements whose style is none do not occupy the position, while those whose style is hidden do not display but still occupy the place.

Features of inline-block elements:

Display: inline-blockThe object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed.
The object is presented as an inline object, but the object content is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed. (To be precise, the elements applying this feature are rendered as inline objects, and the surrounding elements are kept in the same row, but attributes of the width and height of the plot element can be set)
Not all browsers support this attribute. Currently, the following browsers are supported: Opera and Safari use display: inline-block for inline elements in IE. IE does not recognize this attribute, but display: inline-block triggers layout in IE, so that the inline element has the table disease of the display: inline-block attribute. From the above analysis, it is not difficult to understand why setting the display: inline-block attribute for block elements in IE cannot achieve the effect of inline-block. At this time, the block element is only triggered by the display: inline-block layout, and it is the row layout, so after the triggering, the block element is still the row layout, instead of submitting an inline object as a block element in Opera.
How can I implement the display: inline-block effect for block elements in IE?
There are two methods:
1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows (... for other omitted attributes ):
Div {display: inline-block ;...}
Div {display: inline ;}
2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, zoom: 1 ). The Code is as follows:
Div {display: inline; zoom: 1 ;...}

Block element)
◎ Address-address
◎ Blockquote-block reference
◎ Center-align Blocks
◎ Dir-directory list
◎ Div-common block levels are easy, and it is also the main tag of css layout
◎ Dl-definition list
◎ Fieldset-form Control Group
◎ Form-interactive form
◎ H1-title
◎ H2-subtitle
◎ H3-Level 3 title
◎ H4-4 level title
◎ H5-Level 5 Title
◎ H6-6 level title
◎ Hr-horizontal Separator
◎ Isindex-input prompt
◎ Menu-menu list
◎ Optional content of noframes-frames (content in this block is displayed in browsers that do not support frame
◎ Noscript-optional script content (this content is displayed in browsers that do not support scripts)
◎ Ol-sorting form
◎ P-paragraph
◎ Pre-format text
◎ Table-table
◎ Ul-non-sorted list Inline element)
◎ A-anchor ◎ abbr-abbreviation
◎ Acronym-First word
◎ B-bold (not recommended)
◎ Bdo-bidi override
◎ Big-large font
◎ Br-line feed
◎ Cite-Reference
◎ Code-computer code (required when source code is referenced)
◎ Dfn-define a field
◎ Em-emphasis
◎ Font-font setting (not recommended)
◎ I-italic
◎ Img-Image
◎ Input-input box
◎ Kbd-define keyboard text
◎ Label-Table label
◎ Q-short reference
◎ S-hyphen (not recommended)
◎ Samp-Define sample computer code
◎ Select-select a project
◎ Small-small font text
◎ Span-commonly used inline containers, defining text blocks
◎ Strike-dashes
◎ Strong-highlighted in bold
◎ Sub-subscript
◎ Sup-superscript
◎ Textarea-multi-line text input box
◎ Tt-telex text
◎ U-underline
◎ Var-define variables
According to ie, margin, padding, and border are layout attributes. It seems that it should not be used on the inline element.
The css2.1 specification provides the following descriptions:
Margin applies
All elements should t elements with table display types other than table-caption, table and inline-table
Padding applies
All elements should t table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
However,
Margin-top/bottom is invalid for the non-replaced inline element (have no effect on non-replaced inline elements ).
Margin-left/right applies to the non-replaced inline element, but when the non-replaced inline is a element, there will be a in ie using margin-left/right: the error message returned when the active virtual box is misplaced.
Http://bbs.blueidea.com/thread-2927667-1-1.html
So I think the use of margin for non-replaced inline elements is not very good.
The use of margin on the replaced inline elements (img, textarea, And button) is not very similar to that on the block.
Http://www.cssass.com/blog/index.php/2009/121.html
Padding is similar.
Padding-top/bottom is used on the non-replaced inline element, and we cannot see the effect.
Finally, I would like to thank the blue code classic Forum, Baidu encyclopedia, and ixiang for their sleepless flowers and butterflies.

Lzy19881227. Thanks to angelox ......