본문 바로가기

inline-block2

[CSS] inline-block의 문제점과 해결방법 (태그사이의 공백과 baseline) inline-block의 특징 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소 요소가 수평으로 쌓인다 (inline의 특성) 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 (inline의 특성) width와 height를 가질수 있다 (block의 특성) margin, padding으로 사방에 공백을 만들 수 있다 (block의 특성) inline-block으로 레이아웃을 만들때 문제점 2가지 1. 태그 사이에 공백이 있으면 요소에 공백이 나타난다 1) 태그 사이에 공백이 없을때 요소 사이에 공백이 나타나지 않는다 LeftRight div { width: 100px; height: 300px; color: white;.. 2022. 4. 24.
[CSS] display 속성 inline, block, inline-block 정리 display 요소가 화면에 출력되는 특성 각 요소에 이미 지정되어 있는 display의 속성 2가지 1. inline 글자를 만들기 위한 요소 요소의 크기만큼 차지한다 요소가 수평으로 쌓인다 width와 height를 가질 수 없다 margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다 인라인 요소 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다) , , , , , , , inline 요소 사용시 주의점 inline 속성을 가진 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 inline 속성을 가진 span 태그를 붙여 사용할 경우 화면에 AB로 출.. 2022. 4. 24.