Home > Developer > JavaScript
5. Conversion between block elements and inline elements.
1. Conversion between block elements and inline Elements
We can use css to solve the conversion between block-level elements and inline elements. This attribute difference between block elements and inline elements will not be different after CSS is used. For example, we can add an inline element with an attribute such as display: block, so that it also has an attribute starting from a new line each time, that is to say, we can add the display: inline attribute to the block element so that it can be arranged on a row.
Ii. display: inline and display: block
Display: inline: the display is embedded, so that the fast element is converted to an inline element and has the characteristics of inline element labels.
Display: block: display as a block, so that inline elements can be converted to block-level elements and both have the features of block element labels.
3. Convert block-level elements to inline elements and use display: inline.
<!DOCTYPE html>Code snippet execution result:
You have successfully converted block-level elements into inline elements and have the characteristics of inline elements.
4. inline elements are converted to block-level elements. Use of display: block.
<!DOCTYPE html>Code snippet execution result:
Inline elements have been successfully converted to block-level elements and have the features of block-level elements.
V. display
Display: convert a tag to a type displayed on the page without changing the nature of the tag.
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
