Element classification--inline elements

In HTML, <span>, <a>, <label>, <strong> and <em> are typical inline elements (inline element) (inline) element. Of course, block elements can also be set as inline elements through the code display:inline. The following code converts the block element div into an inline element, so that the div element has the characteristics of an inline element.

 div{
     display:inline;
 }

......

<div>I want to turn it into an inline element</div>

Inline element Features:

1, and other elements are on the same line;

2, the height, width and top and bottom margins of the element cannot be set;

3. The width is the width of the text or image it contains and cannot be changed.

Friends, take a look at the code segment on the right. Do you find a problem? There is a spacing problem between inline elements. This problem is introduced in the wiki in this section. Interested friends You can check it out.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a,span,em{
         background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.php.cn">php中文网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行内元素标签</title> <style type="text/css"> a,span,em{ background:pink;/*设置a、span、em标签背景颜色都为粉色*/ } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.php.cn">php中文网</a> <span>33333</span> <span>44444</span><em>555555</em> </body> </html>

submit Reset Code

Automatic operation

Element classification--inline elements

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]