width, height

1. 블럭 요소일때

<div class="container"></div>

.container{
  width : auto;
  height : auto;
  background : tomato;
}

다음과 같이 입력하면, 화면에 아무것도 나오지 않는다.

width의 auto의 값은 100%이지만, height의 auto값은 0이기 때문이다.

 

그래서 height의 값을 변경하면 화면에 값을 볼 수 있게 된다.

.container{
  width : auto;
  height : 100px;
  background : tomato;
}

height만 값 입력시 출력되는 모습

 

 

 

2. 인라인 요소일때

하지만 이와같이 높이만 설정해도 출력이 되지않는 경우도 있다.

<span></span>

span{
  width : 100px;
  height : 100px;
  background : tomato;
}

다음과 같이 입력하면 화면에 아무것도 출력되는것이 없다. 왜냐하면 span태그는 inline요소이기 때문이다.

모든 inline요소는 높이를 설정해줘도 아무것도 출력이 되지 않는다. 또한, 가로 설정해도 마찬가지다.

즉 inline요소는 가로 및 세로 값을 가질 수가 없다. inline요소는 text를 다루는데 특화 되어있다.