간격 맞출때
flex 가 가장 좋다 하지만,
다른방법으로는
가로로 먼저 묵고
첫째가로 둘째가로 이런식으러 묵고 작업후
또 그 첫째 가로 안에서 또 세로로 묵고 작업하고 이런식으로 해야함
정렬할때,
기본적으로display:inline-block 으로 처리후
정렬을 하고
이게 안되거나 연달아 display:inline-block 쓰면 안먹힘
그럴땐 그냥
float: 으로 처리하면됨.
상하로 튀어나오거나 할떄는
vertical-align: top;
이거 써서 정렬하고
마진 줫는데 뭔가 안맞을떄는
다시 float:left 이런식으로 다 띄워준다음
그 부모에 그 공간을 주기위해 display:inline-block 주면됨
그러면 마진이 잘 먹힘.
박스모양 여러개 정렬할떄
width 값을 계산해서 주기 힘들때, 즉, 딱 안맞아 떨어져서 마진이 튀어나오거나 뭔가 그럴떄는,,,
width: calc(100% / 6) 이때 6은 6로 나눈 다는 뜻이므로 화면에 6등분으로 표현된다.
세로문제는
vertical-align: top;
으로 해결 보고,
참고로
vertical-align: top;
은
display: inline-block
인 애들한테만 적용이된다.
가로는
float:
이나
display: inline-block
으로
자식들의 마진은 최대한 부모가 가져가는걸로 해줘라.
그래야 마진이 안겹친다(마진 콜랩싱)
즉
자식이
float일경우는
부모는
display: inline-block;
width: 100%;
vertical-align: top;
자식은
float:left;
width: 332px;
height: 120px;
vertical-align: top;
background-color: white;
margin-bottom: 8px;
요런식으로
플롯 left 먹여주고
위드 헤이트 주고
마진 줄꺼있음 주고,
근데
마진 콜랩싱,
즉, 자식한테 마진을 줫는데, 마진이 부모마진이랑 혹은 조상마진이랑 겹치면 마진 콜랩싱 일어나서
정렬이 꺠져서 밑으로 내려가거나 함,
그러면
최대한 안겹치게
잘 점검해서 짜야함.
