e:I[86069,["6841","static/chunks/app/p/%5Bid%5D/page-4bec94ee790807ae.js"],"default"] f:T7f7,$$config title: display 속성 block과 inline의 차이 keywords: - IT - CSS - block - inline - inline-block $$ # display : block - block 속성은 무조건 한 줄을 점유하고, 다음에 오는 태그에 줄바꿈이 적용되어 수직정렬로 나열된다. - 높이는 최소화, 너비는 최대화 - 텍스트를 block 태그로 감싸면 텍스트의 크기의 크기가 어떻든 무조건 한 줄을 점유한다. - block의 속성을 가지고 있는 태그는 div, section, article 등의 태그가 있다. # block 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/WNjLbqz?default-tab=html%2Cresult&theme-id=dark $$ # display : inline - inline 속성은 공간을 최소화하여 공간 만큼만 점유하며, 줄바꿈을 하지 않고 수평정렬로 나열된다. - 텍스트를 inline 태그로 감싸면 텍스트의 크기 만큼만 공간을 점유한다. - inline의 속성을 가지고 있는 태그는 a, img, span 등의 태그가 있다. - width, height, line-height 적용이 불가능하다. - margin-top,bottom, padding-top,bottom 적용이 불가능하다. # inline 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/XWRoJLQ?default-tab=html%2Cresult&theme-id=dark $$ # display : inline-block - inline-block 속성은 block과 inline의 속성의 특징 모두를 가지고 있는 속성이다. - inline 속성처럼 공간을 최소화하여 한 줄로 나열되지만, block처럼 width, height, margin, padding 적용이 가능하다. - ※ 어떤 태그든 css에서 display 속성을 변경할 수 있다. # inline-block 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/NWjePZy?default