HTML+CSS Easy to Get Started with Inline Elements

In HTML, <span>, <a>, <label>, <strong> and <em> are typical inline elements (inline elements). Of course, block elements can also be set to inline elements through code

display:inline

##inline Element features:

1. It is on the same line as other elements;

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

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

Let’s write a piece of code below. The width and height can be set for block elements, but the width and height cannot be set for inline elements.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		width:100px;
		height:50px;
		background-color:green;  /*设置背景色*/
		color:#fff;  /*设置字体颜色*/
	}
</style>
</head>
<body>
   <a href="#">PHP中文网</a>
</body>
</html>

Look at the above code, a is an inline element, When we set the width and height, it has no effect. Converting it to block elements will have obvious effects.

Let’s write an example below to convert block elements into inline elements

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	div{
		display:inline;  /*转换成内联元素*/

		/*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<div>欢迎大家来到php中文网</div>
</body>
</html>

Above In the code, after the block element is converted into an inline element, the width and height cannot be set

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>

submit Reset Code

Automatic operation

HTML+CSS Easy to Get Started with 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]