본문 바로가기
Front-End/Html | CSS

display | position 차이

by cocogugu 2023. 5. 5.
반응형

display : block - 한줄에 하나만 가능

display : inline-block - 한줄에 여러개 가능 

 

display:block 이미지 3개 / display:inline-block 이미지 3개
display:block은 red / display:inline-block은 black

 

red : block / black : inline-block

position 

static - 기본값, 위치 이동 불가(HTML 순서에 의해서 위치 선정)

relative - 원래 위치에서 top,left,right,bottom속성으로 위치 이동 가능

top / left 20px 값에 의해서 box 이동함.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

absolute - 요소가 속해있는 바로 위의 상자를 기준으로 이동

top / left 20px 값에 의해서 box 이동함.

반응형

댓글