CSS block-level elements and inline elements

CSS block-level elements and inline elements

HTMLThe elements in can be divided into two types: block-level elements and row-level elements. The types of these elements are indicated by the document type definition (DTD). Block-level elements: displayed in a piece, will be automatically wrapped, the elements will be vertically arranged from top to bottom, respectively, such as,,,, and p ul form div other label elements. Inline elements: elements are arranged horizontally within a row, and the height is determined by the content of the element, and height attributes do not work, such as span,input elements.

One, block-level elements: block element

Each block-level element is a row high by default, and adding a block-level element in a row cannot generally add additional elements ( float except after a float). When two block-level elements are continuously edited, they are displayed in a page wrap. Block-level elements can generally be nested in block-level elements or inline elements;
Block-level elements typically appear as containers, and are used to organize structures, but not all. Some block-level elements, such as block-level elements, can only be included.

DIV is the most commonly used block-level element, and the element style display:block is a block-level element. They are always in the form of a block, and with siblings of sibling blocks in sequence, left and right full.

Elements in line: inline element

Also known as inline elements, inline elements, etc., the inline elements are generally based on the semantic level ( semantic ) of the basic elements, can only accommodate text or other inline elements, common inline element "a". For example, the SPAN element, the display:inline of the IFRAME element and the element style are all inline elements. such as text such elements, each letter is arranged horizontally, to the right end of the automatic folding line.

The characteristics of block elements:

①, always start on a new line;
②, height, row height, and margin and inner margin can be controlled;
③, width default is 100% of its container, unless a width is set.
④, which can accommodate inline elements and other block elements

Iv. Characteristics of inline elements

①, and other elements are on one line;
②, high, high and outer margin and inner margin can not be changed;
③, Width is the width of its text or picture, can not be changed
④, inline elements can only hold text or other inline elements

For inline elements, be aware of the following:

Setting width is not valid. The setting height height is invalid and can be line-height set by. Set margin
Only left margin and right valid, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.

V. Common block elements

address– Address
blockquote– Block Reference
center– the Alignment block
dir– directory List
div– commonly used block-level easy, but also the main label of CSS layout
dl– definition List
Fieldset–form control Group
form– Interactive Forms
h1– Big Title
h2– Subtitle
H3–3 level headings
H4–4 level headings
H5–5 level headings
H6–6 level headings
hr– Horizontal Divider Line
Isindex–input prompt
menu– Menu List
Noframes–frames Optional content (this chunk content is displayed for browsers that do not support frame
noscript– Optional Script content (this content is displayed for browsers that do not support script)
ol– ordered Forms
P – Paragraph
pre– formatting text
table– form
ul– unordered List

Vi. Common inline elements

A – Anchor Point
abbr– abbreviation
acronym– First word
b – Bold (not recommended)
Bdo–bidi Override
big– Large Font
br– line break
cite– references
code– Computer code (required when referencing source)
dfn– Defining fields
Em– stressed
font– font settings (not recommended)
I – Italic body
img– Pictures
input– input Box
kbd– Defining keyboard text
label– Table Labels
Q – Short Quotes
S-underlined (not recommended)
samp– Defining sample computer code
select– Project Selection
small– Small Font text
span– commonly used inline containers that define chunks within text
strike– in Underline
strong– Bold Emphasis
sub– subscript
sup– superscript
textarea– Multi-line text input box
tt– Telex Text
U underline

Seven, variable element

A mutable element is a block element or an inline element that determines whether the element is in context.

• Applet-java Applet
• Button-Buttons
• Del-delete text
• Iframe-inline Frame
• INS-Inserted text
• Map-image block (map)
• Object-object Object
• Script-client-side scripting

What is the difference between an inline element and a block-level element?

• Difference One:

  • Block-level: block-level elements will have a single row, and width automatically fills the width of its parent element by default

  • Inline: Inline elements do not monopolize a row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.

• Difference Two:

  • Block-level: block-level elements can be set to a wide height

  • Inline: In-line elements cannot be set to width height

• Difference Three:

  • Block-level: block-level elements can be set margin ,padding

  • Inline: The horizontal direction of the element in the line margin-left ; margin-right ;

  Padding-left; Padding-right; can take effect. But in a vertical direction margin-bottom; margin-top ; padding-top padding-bottom; But not in force.

• Difference Four:

  • Block level:display:block;

  • In line:display:inline;

You can display toggle block-level elements and inline elements by modifying properties

CSS block-level elements and inline elements