inline, inline-block, block

nonasking·2021년 12월 1일
0

display: inline

element가 element의 내용만큼만 공간을 쓰게 된다.
따라서 widthheight 를 지정할 수 없다.
display: inline인 element는 줄바꿈 없이 한 줄에 함께 나열된다.
예시: <span> <a>

display: block

element가 화면 전체 공간을 사용한다.
width, height, margin, padding 모두 자유롭게 사용할 수 있다.
display: block인 element의 전후에 줄바꿈이 일어나기 때문에 한 줄을 온전히 차지하게 된다.
예시: <div> <h1>

display: inline-block

element css를 inline-block으로 따로 지정해주어야 한다.
display: inline처럼 element들이 한 줄에 나열된다.
display: block 처럼 width, height, margin, padding 모두 자유롭게 사용할 수 있다.
예시: <select> <input>

profile
Back-end Junior Developer

0개의 댓글