inline boxes라는 것과 block-level boxes 라는게 있는데
간단히 설명하면 inline은 딱 컨텐트 사이즈만큼의 사이즈를 가진
박스들이고 block-level boxes 얘들은 한 줄 전체 다 쓰는 애들이다.
inline boxes들은 한 줄 전체를 안쓰니까
다른 엘리먼트들이 옆으로 붙는 반면에
한 줄 전체 다쓰는 block-level boxes들은
수직으로 붙게 된다
그말은 즉, inline boxes애들은
margin padding 이런게 적용이 안됨
왜냐면 얘내들은 세로로 적용되는 애들인데
inline은 가로애들이니까 ㅎㅎㅎ
예를들어
nav a:link {
background-color: orangered;
margin: 20px;
padding: 20px;
display: block;
여기 보면 이렇게 a태그들은 원래 인라인 박스애들인데
display: block;이걸 붙여줌으로써
block level box로 만들어줄수가 있다.
반대로
li {
font-size: 20px;
margin-bottom: 10px;
display: inline;
}이런식으로 하면 원래 li은 블락 레벨 박스인데
인라인 박스로 만들 수 있다..
그리고 세번째로 !!! 신기했던데
inline-block box 라는 것이다.
요건 위에 두 아이들을 합친? 성격이라고 보면 되는데
보이는건 인라인으로 보이지만 성격은 블락레벨 박스를
가지고 있는걸 말한다고 한다.
이런애들은 display: inline-block를 써주면
이런 성격을 가지게 해주는데 예를 보자면
nav a:link {
margin-right: 30px;
margin-top: 10px;
display: inline-block;
}이런식으로 되어있으면 형태는 인라인박스로
옆에 쭈욱 나열되는데
성격은 블락레벨 박스 성격을 가져서
마진 저렇게 설정해도 잘 적용되는것을 볼 수 있다...
이 부분 넘 신기하고 재밌었다는 ㅎㅎㅎㅎ
그리고 이미지부분은 inline element이지만
inline-block element성격을 가진다고 한다.
신기방기 ㅎㅎㅎㅎ
