What are inline elements and block-level elements? _html/css_WEB-ITnose

1. What are inline elements and block-level elements?

Block-level elements

   

information on author

long quotation

push button

table caption

definition description

deleted text

generic language/style container

definition list

definition term

form control group

interactive form

heading

heading

heading

heading

heading

heading

---

horizontal rule

inline subwindow

inserted text

fieldset legend

list item

client-side image map

alternate content container for non frame-based rendering

alternate content container for non script-based rendering

generic embedded object

ordered list

paragraph

preformatted text

table
table body
		table data cell
table footer
		table header cell
table header
table row
	unordered list

Inline elements

   

	anchor
	abbreviated form
	acronym
	bold text style
	I18N BiDi over-ride
	large text style
	forced line break
	push button
	citation
	computer code fragment
	deleted text
	instance definition
	emphasis
	italic text style
	inline subwindow
	Embedded image
	form control
	inserted text
	text to be entered by the user
	form field label text
	client-side image map
	generic embedded object
	short inline quotation
	sample program output, scripts, etc.
	option selector
	small text style
	generic language/style container
	strong emphasis
	subscript
	superscript
	multi-line text field
	teletype or monospaced text style
	instance of a variable or program argument

2. What is the difference between inline elements and block-level elements?

1.Size - an important difference between block-level elements and inline elements

inline elements and width

The W3C CSS2 standard stipulates that the width attribute will not be applied to inline elements and non-replacement elements.

In the following example, width:200px is applied to the inline element . As you can see, it has no effect at all.

Inline elements and height

The W3C CSS2 standard stipulates that the height attribute will not be applied to inline elements and non-replacement elements, but the box height can be passed through line -height to specify.

In the following example, height:50px is applied to the inline element . You can see that there is no effect.

Inline elements and padding

You can set padding for inline elements, but only padding-left and padding-right take effect.

In the following example, the inline element has padding:50px applied. You can see that it affects the left and right content, but not the top and bottom.

Inline elements and margin

The margin attribute is the same as the padding attribute. It is valid for the left and right of inline elements, but not for the top and bottom.

In the example below, margin:50px is applied to . You can see that the left and right edges are effective but the top and bottom content are not.

Remember that setting width for inline elements

has no effect.
Setting height is invalid and can be set by line-height.
Setting margin is only valid for left and right margins, not for top and bottom.
Setting padding is only valid for left and right padding, not for top and bottom. Note that the scope of the element has increased, but it has no effect on the content around the element. You can see the effect just by looking at the picture

The above part is translated from: http://www.maxdesign.com.au/ presentation/inline/

2. The text-align attribute is the difference between the two expressions

in the W3C CSS2.1 specification Section 16.2 describes text-align in detail:
---------------------------------- -------
Value: left | right | center | justify | inherit
Initial value: anonymous value, determined by the value of 'direction', if 'direction' is 'ltr' then ' left', or 'right' if 'direction' is 'rtl'.
Applies to: block-level elements, table cells, inline block elements
Inheritance: is
calculated value: initial value or specified value
---------- --------------------------------

This feature describes how to make a block element Inline content aligned.
Note that the standard says that this attribute is used to align inline content , so not should work on block-level content.
Explain, inline content refers to content composed of inline elements. Everyone knows about inline elements, such as SPAN elements, IFRAME elements and element style'display: inline ' are all inline elements; block-level content and are composed of block-level elements, and DIV is the most commonly used block-level element. The difference between block-level elements and inline elements is that block-level elements will be displayed on one line, while inline elements can be displayed side by side on one line.
In this way, our understanding of this feature should be clear. However, the question arises. Although the standard stipulates this, do all browsers comply with it? The answer is no. Guess which browser is so unique? IE! !
In IE6/7 and IE8 mixed mode, text-align:center can center-align block-level elements. In other browsers, text-align:center only works on inline content.
A better way to solve this problem is to set "margin-left:auto; margin-right:auto" for all block-level elements that need to be centered relative to the parent container. However, this method is not supported in the mixed mode of IE6/IE7/IE8, so the "text-align:center;" of the parent container must be set.

If the inline content within the center-aligned child element does not need to be center-aligned, you also need to set "text-align:left" for it: