HTML+CSS 인라인 요소로 쉽게 시작하기

HTML에서는 <span>, <a>, <label>, <strong> 및 <em>이 일반적인 인라인 요소(인라인 요소)입니다. 물론 블록 요소는 코드

display:inline

인라인 요소 기능을 통해 인라인 요소로 설정할 수도 있습니다. :

1. 다른 요소와 같은 줄에 있습니다.

2. 요소의 높이, 너비, 위쪽 및 아래쪽 여백을 설정할 수 없습니다. . 요소 너비는 포함된 텍스트 또는 이미지의 너비이며 변경할 수 없습니다.

아래 코드를 작성해 보겠습니다. 블록 요소에는 너비와 높이를 설정할 수 있지만 인라인 요소에는 너비와 높이를 설정할 수 없습니다.

<!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>

위 코드를 보세요. a는 인라인 요소이므로 너비와 높이를 설정하면 아무런 효과가 없지만 블록 요소로 변환하면 확실한 효과가 나타납니다

블록 요소를 인라인 요소로 변환하는 예제를 아래에 작성해 보겠습니다

<!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>

위 코드에서 블록 요소를 인라인 요소로 변환한 후에는 너비와 높이를 설정할 수 없습니다

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전