[CSS] - Display:inline 과 display:block의 차이점(펌)

출처 : http://www.cyworld.com/zxcvbn0704/3995881

1. div와 span

 

<div> div는 어케 돌아가는가 1</div>

<div> div는 어케 돌아가는가 2</div>

<div> div는 어케 돌아가는가 3</div>

 

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

div는 어케 돌아가는가 1   

div는 어케 돌아가는가 2 

div는 어케 돌아가는가 3  

 

<span>span 은... 1</span>

<span>span 은... 2/span>

<span>span 은... 3/span>

 

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

span 은... 1span 은... 2pan 은... 3

 

div와 span의 가장 큰 차이는 줄 바꿈 여부이다.

div가 줄바꿈되는 이유는 css display속성 기본값이 block이고,

span이 줄바꿈되지 않는 이유는 css display속성 기본값이 inline이기 때문이다.

 

이 두 설정을 반대로 해보자.

 

div{display:inline}

span{display:block}

 

^^

 

차이점

1. block으로 설정하면 줄바꿈되고, inline으로 설정하면 줄바꿈이 되지 않는다.

2. block로 설정하면 상/하 margin과 padding속성을 사용할 수 있지만,

    inline으로 설정하면 상/하 margin과 패딩은 사용할 수 없다.

3. block로 설정하면 width, height 속성을 사용할 수 있지만,

    inline으로 설정하면 width, height속성을 사용할 수 없다.

 

 

2. display

block 요소는 정렬할때 display:liline; 이나 float를 사용한다.

display는 liline 혹은 block 혹은 hidden 을 속성값을 지닌다

 

고로 block를 inline으로 하면 인라인특징인 left 정렬이 된다.

span은 인라인 요소이기 때문에

 

<span>오데로정렬 &nbsp&nbsp</span><span>오데로정렬 &nbsp&nbsp</span>

-> 왼쪽 정렬이 될것이다.

하지만 block요소들은 float 설정하지 않은 이상 한줄씩 나온다. 그래서

block요소 정렬을 하기 위해서는

block의 정렬은 float

inline의 정렬은 text-align

      (block의 중앙정렬은 margin:0 auto; 반드시 block는 width값이 있어야 한다. )

 

3. float

object 즉 block을 정렬시킬때 사용

float는 자석처럼 left나 right를 사용하여 어느쪽으로 붙을지만 결정하면 다음 요소들은 그 효과로 인해 붙어버린다. 이것을 방지하기 위해 clear를 해준다.

 

최대 단점은 부모가 float된 자식의 높이를 가져 오지 못한다. float방식이 공중에 띄워서 하는 방식이기 때문이다.

 

 

clear는 혼자서는 아무효과가 없다. 원래의 속성으로 돌아가지 때문에 block요소의 고유정렬인 한줄씩 정렬로 된다.

 

 

 해결1 : float에 float

 

 해결2 : float에 overflow

 

 

 해결3: float에 빈요소( <div></div>) 로 clear

 

 

 해결 4: 가상선택자 : alter로 clear

 

해결 5: dispaly:inline-block으로 clear

float된 자식요소들의 높이를 부모에게 전달하는 방법으로써 부모 요소에 display:inline-block 속성을 부여.

inline-block 속성이 부여된 요소는 float된 자식의 높이만큼 늘어난다.

단, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있습니다. 또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 이점 유념하시는게 좋겠습니다. 

참조

• Cascading Style Sheets, level 2 CSS2 Specification – http://www.w3.org/TR/REC-CSS2/
• CSS2 규격 한글 번역문 – http://trio.co.kr/webrefer/css2/cover.html
• CSS 2.1 Visual formatting model details – http://www.w3.org/TR/CSS21/visudet.html#block-root-margin
• YAML > How Floats Work – http://www.yaml.de/en/documentation/basics/how-floats-work.html
• 신현석 > CSS Floating and Clearing – http://hyeonseok.com/soojung/web/2005/03/07/123.html