인라인 태그에 width height 값 적용, 인라인요소 블록 속성으로 바꾸기

 

인라인태그 작업 방법!

span태그는 인라인 요소! 인라인 요소는 기본적으로 width, height값 무시 함!

그래서 너비, 높이값을 지정해도! 적용이 되지 않음!

 

그렇다면 어떻게 해결 할 수 있을까?

 

인라인 요소가 width, height 값을 가지게 하려면?!

display 값을 변경해야 한다.

 

[ 첫번째 방법 ]

span {
  display: inline-block; /* 또는 block */
  width: 20px;
  height: 20px;
}

 

인라인태그에~

display: block 또는 display: inline-block을 줘서!

블록요소로 만들어~! 인라인태그를 블록태그처럼 사용 할 수 있다.

 

 

또 다른 방식으로!

인라인태그에 너비, 높이 값을 가지게 하는 방법이 있는데~

 

v

v

 

[ 두번째 방법 ]

.span {
  position: absolute;
  width: 20px;
  height: 20px;
}

 

인라인태그에~

position: absolute;가 적용되면 인라인 요소도 블록처럼 크기를 가질 수 있다.