CSS - box Display Type
box Display Type
- display : block;
- display : inline;
- display : inline-block;
block
길막
옆에 남은 공간이 충분하지만 display type이 block인 경우 옆에 놓을 수 없다.
- width를 선언하지 않은 경우, width= 부모 content-box의 100%.
.parent {
width : 1000px
height : 1000px
background-color: #000;
}
.child {
height : 100px
color: #fff;
}
width 값을 안주었으니 parent의 width 길이와 같아진다. width : 100%;
width를 선언하면 남은 공간은 자동으로 margin으로 채움.
.parent {
width : 1000px
height : 1000px
background-color: #000;
}
.child {
width : 50px
height : 100px
color: #fff;
}
블록을 가운데에 배치
margin: 0 auto;
top과 botoom은 0px
left와 right는 자동
자동으로 마진 생성 : auto
따로 부모의 height를 선언하지 않을 경우, 자식 요소(content,border,padding, margin)의 height의 합 = 부모의 height.
.parent {
width : 1000px
background-color: #000;
}
.child1 {
width : 50px
height : 500px
color: #fff;
}
.child2 {
width : 100px
height : 100px
color: #fff;
}
parent의 height는 50px(child1)+ 100px(child2) = 150px
block 기본 특징
- box 모델에 있는 모든 특징들(width, height, padding, border, margin) 적용 가능
inline
흐름
- 블록과 반대.
block vs inlineblok
| block | inline |
|---|---|
| 면(영역) | 선(흐름) |
| 영역이기 때문에 box 모델에 있는 모든 특징들(width, height, padding, border, margin) 적용 가능 | box 모델에 있는 모든 특징들( **width, height 및 padding,border,margin의 top과 bottom 사용 불가** 위아래 줄간격을 방해하기 때문에. |
| 요소 : | 요소 :span, |
