> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/html-css/inline-block.md).
# inline-block
레이아웃을 구성할 때 float 외에 많이 쓰는 것중 하나인 inline-block
display : block (한행을 전부 차지)
display : inline-block (내 크기만큼 차지)
가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다.
display : inline-block을 사용해봅시다.
```html
//이런식으로 공백을 없애줘야 한다.
혹은
```
{% code title="main.css" %}
```css
.left{
width: 30%;
height: 400px;
background: cadetblue;
display: inline-block;
}
.right{
width: 70%;
height: 400px;
background: coral;
display: inline-block;
}
```
{% endcode %}
위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다.
display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다.
inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요\~" 라는 뜻입니다.
간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에
가로로 정렬하려면 태그 사이의 공백도 제거해줘야합니다.
이런게 귀찮습니다 float 쓰셈
주석은 실행되지 않는 코드입니다.
HTML 코드는 \ 이게 주석처리하는 코드이며
이 사이에 코드를 집어넣으면 실행되지 않습니다.
하지만 그래도 더러워보입니다.
다른 방식
1. left와 right 사이의 주석처리 혹은 공백제거
2. 부모 div에 font-size : 0
```html
asd
```
font-size 속성은 inherit 되기 때문에 안에 있는 \
와 그 사이에 있는 공백도 font-size가 0px이 됩니다.
이러면 해결인데 HTML이 깨끗해질지 모르겠지만 CSS가 더러워질 수 있겠군요.
둘 중에 덜 더러워보이는 방법을 하나만 사용하시면 되겠습니다.
🎈. baseline이 옆에 존재하면 display : inline-block 요소들이 baseline 위에 오려고 함 > vertical-align: top속성 으로 해결
✨ 과제. 네이버 블로그 글목록 만들어보기 (blog1.html 파일)생성
