[HTML/CSS] 인라인 요소와 블록 요소
CSS에는 크게 두 가지 박스 요소가 있다 : block 요소와 inline 요소
📌 블록(block) 요소
- 전후 줄바꿈이 발생하여 다른 요소를 다른 줄로 밀어냄
- 한 줄 100% 사용. 사용하지 못하는 공간은 margin
- width, height, padding, margin, border 모두 사용 가능
- 위의 속성이 다른 요소를 밀어냄
- 블록 요소 안에 블럭 요소 사용 가능
📌 인라인(inline) 요소
- 컨텐츠 크기만큼만 차지
- width, height 속성 지정 불가
- 인라인 요소 안에 블록 요소 사용 불가
- padding, border 사용 가능하지만 margin은 좌우로만 가능
- padding과 border의 상하값은 다른 요소를 밀어내지 않음
(아래처럼 div를 밀어내지 않고 그 위를 침범한다)
📌 inline-block
- block(블록) 요소처럼 padding, margin, height, width 등을 모두 지정할 수 있으면서도 inline(인라인) 요소처럼 한 줄에 여러 요소를 배치할 수 있는 박스
div {display: inline-block}
inline, block element lists 참고 사이트 (1), (2)
Author And Source
이 문제에 관하여([HTML/CSS] 인라인 요소와 블록 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mooongs/HTMLCSS-인라인-요소와-블록-요소저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
