CSS- inline, inline-block, block

Junghyun Park·2021년 1월 12일
0

css display 속성에는 inline, inline-block, block, none, flex 등이 있음

더 많은 display 속성 값 알아보기

inline

  • 콘텐츠 크기 만큼만 해당 콘텐츠를 감싸는 박스의 크기가 연동되어 결정됨
  • horizontally 정렬하는 경우 주로 사용
  • 전체적인 배치 flow에 영향을 최소화 하면서, 전체 구조(문장) 내에서 일부 문장(단어)에 대한 효과를 주고자 하는 경우 자주 사용
  • default 값이 inline인 element는 아래와 같음
    <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

block

  • 기본적으로 해당 element가 존재하는 가로폭을 모두 차지하고, width를 줄여 조절하더라도 다음 element는 다음 줄에 추가됨
  • defalut 값이 block인 element는 아래와 같음
    <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

inline-block

  • block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음
  • Internet Explorer 7 이하에서는 사용할 수 없음

https://seungwoohong.tistory.com/23
https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

profile
21c Carpenter

0개의 댓글