인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 모두 가지고 있습니다
그러므로 요소를 인라인 블록 요소로 설정하는 방법
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 태그를 인라인 블록 요소로 변환한 후 너비와 높이를 설정할 수 있습니다
다음 섹션