[html] 블록요소와 인라인요소 차이/ display:block; display:inline;

1. 블록요소

1. div, h1,p

2. 사용 가능한 최대 가로 너비를 사용한다.

3. 크기를 지정할 수 있다.

4. width: 100%, height:0으로 시작한다.

5. 수직으로 쌓임

7. margin, padding 위, 아래, 좌, 우의 여백을 사용 가능하다.

8. 레이아웃을 잡는데 사용한다.

 

2. 인라인요소

1.span, img

2. 필요한 만큼의 너비를 사용한다.

3. 크기를 지정할 수 없다.

4. width:0, height:0 으로 시작한다.

5. 수평으로 쌓임

6. 줄바꿈을 하면 띄워쓰기가 되고 아니면 띄워쓰기 안됨

7. margin, padding 중 위 아래는 사용할 수 없다. 좌우만 가능하다.

8. text에 주로 사용한다.

 

display: block;

인라인 요소를 block처럼 바꾼다는 뜻

 

display: inline;

블럭 요소를 inline요소처럼 바꾼다는 뜻