[CSS] inline, block, inline-block

 

display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성

• dispaly: inline;  텍스트처럼
• dispaly: block;  상자처럼

inline 요소들 <span>, <a>, <img>, <strong>

- 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감.

 

block 요소들 <div>, <p>

- width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감.

 

inline-block속성은 위 두가지의 특징을 모두 가짐,

inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능.

 

.box1 {
	display: inline-block;
	width: 300px;
}
.box2 {
	display: inline-block;
	width: 200px;
}

 

 

 

 

 

 

참고.
studiomeal.com/archives/282