Home > Developer > Web Develop
In CSS, tag elements in HTML are broadly divided into three different types: block elements, inline elements (also called inline elements), and inline block elements.
1, block element
The most common block elements are:
<div>, <p>,
What is a block-level element? In HTML <div>, <p>, display:blockthe setting is to display the element as a block-level element. The following code is the conversion of inline element A into a block element, so that the a element has a block element feature.
A{display:block;}Block-level element features:
1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)
2, the height of the element, width, row height, and the top and bottom margin can be set.
3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.
2, inline element
The commonly used inline elements are:
<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>
Inline elementsIn HTML,,<span>, <a>, <label>, <strong>, and <em> are typical inline elements (inline elements). Of course, block elements can also display:inline be coded to set elements as inline elements. The code below is to convert the block element div into an inline element, so that the DIV element has an inline element feature.
div{ Display:inline;} ......<div> I want to become an inline element </div>Inline element Features:
1, and other elements are on one line, (there is a little space between each element of the different rows, but if there is no space between the elements written on the same line, the difference between the following 44444 and 4444455555)
2, the height of the element, the width and the top and bottom margin is not set;
3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.
For example, in HTML you have the following code:
<body>
<a href= "http://www.baidu.com" > Baidu </a>
<a href= "http://www.imooc.com" > Mu class network </a>
<span>33333</span>
<span>44444</span><em>555555</em>
Although two spans are written in two lines, however, in the implementation of the effect is: Baidu Mu class network 33333 4444455555
3, inline block element
The commonly used inline block elements are:
, <input>
Inline block elements (Inline-block) are features that have inline elements, block elements, and code that display:inline-block sets elements as inline block elements. (css2.1 New),, <input> tag is this inline block tag.
Inline-block Elemental Features:
1, and other elements are on one line;
2, the height of the element, width, row height, and the top and bottom margin can be set.
HTML element Classification: block-level element inline element and inline block element
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
