display: block과 inline

CSS 2010. 4. 15. 13:11

아래 태그는


<div>div1</div>
<div>dIv2</div>
<div>div3</div>


웹 브라우저에 아래와 같이 표시된다.


반면에 아래 태그는


<span>span1</span>
<span>span2</span>
<span>span3</span>


웹 브라우저에 아래와 같이 표시된다.

 

이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다. div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.

div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고, span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.


아래처럼 반대로 설정하면


div {
  display: inline;
}

span {
  display: block;
}


웹 브라우저에 아래와 같이 표시된다.

 

block과 inline의 차이점은 줄바꿈만은 아니다.

  • block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
  • block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
  • block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.


출처: 딤돌 - 지구에 거꾸로 매달리기



추가
inline 속성은 li 등에  이미지를 넣어 돌릴경우 빈 여백이 생긴다. 이것때문에 평소 이 태그를 자주 쓰지 않았었는데 float 속성은 div 높이값을 인식하지 못하기 때문에 해결 방안을 적어놓는다.

이미지 자체에 vertical-align:top; 을 먹이면 빈 여백이 사라지고 ie6, 7 에서도 같은 사이즈의 결과물을 얻을 수 있다.

 

'CSS' 카테고리의 다른 글

폰트 사이즈 비교  (0) 2010.04.22
CSS속성 선언 순서  (0) 2010.04.22
제목이나 디자인적 요소를 감출시..  (0) 2010.04.14
텍스트에 의한 테이블 늘어남 방지  (0) 2010.04.08
font 와 background 대표속성  (0) 2010.04.06
: