인라인 블록 요소로 시작하기 쉬운 HTML+CSS

인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 모두 가지고 있습니다

그러므로 요소를 인라인 블록 요소로 설정하는 방법

display:inline-block;

참고: (css2.1의 새로운 기능), <img>, <input> 태그는 이러한 인라인 블록 태그입니다.

인라인 블록 요소의 특징

1과 다른 요소가 같은 줄에 있다

2 를 사용하면 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 모두 설정할 수 있습니다.

a 태그의 너비, 높이, 배경색 등을 설정하는 예를 아래에 작성해 보겠습니다. a 태그는 기본적으로 인라인 요소이며 너비와 높이는 영향을 미치지 않습니다.

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		display:inline-block;	/*内联块状元素*/	
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<a href="#">欢迎大家来到php中文网</a>
</body>
</html>

위 코드와 같이 a 태그를 인라인 블록 요소로 변환한 후 너비와 높이를 설정할 수 있습니다

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ display:inline-block; /*内联块状元素*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <a href="#">欢迎大家来到php中文网</a> </body> </html>

제출하다 코드 재설정

자동운전