인라인에 display: block 을 주었을 때 효과

HTML 에서 span 태그는 인라인의 효과를 갖기에, span 태그 안의 value 값 만큼만 크기를 갖게 되어있다.
블록형태와는 반대인 타입이 인라인인데, 만약 CSS에서 span 태그에dispaly: block을 준다면 어떻게 될까?

아래는 원래의 span 태그의 가로 값을 보여주는 이미지.

span 태그의 사이즈.

아래와 같이 CSS 코드를 넣어준다면?

body {
  margin: 0;
  padding: 0;
}
span {
  background: red;
  width: 120px;
  height: 80px;
  display: block;
}

 

아래와 같이 기본 값인 인라인 요소를 강제로 블록 요소로 변경했기에 가로 세로 크기도 지정이 되는 것이다.

패스트캠퍼스 올인원 패키지 글 정리.