CSS margin padding

컨텐츠와 컨텐츠사이의 간격 조절

 

일단 코드 정리함

 

 

 

음 div 태그와 span 태그가 너무 딱 붙어 있음 한번 간격을 띄어보자

 

 

마진 10px 줌 결과는?

 

 

 

   떨어지긴했는데 상하 좌우 다 10px  떨어진걸 알수 있음

 

 

근데 밑에어만10px 주고 싶음 

 

음 잘됬음

 

스펜에도 마진을 줘보자 

 

 

 

 

 

음 잘되어 있다

 

그러면 div 에 있는 마진 바텀을 지워주고 스팬에 마진 탑 30px 을 줘보자 똑같은 결과가 나오겠지?

 

????????????????????????????????????????????????????????????????????????????????????????????????뭐지??

 

알아보니 위 아래로만 움직이는 마진은 블럭요소에만 적용된다고함 ;;

아니;; 왜이렇게 햇갈리게 만들어놓은거야 ㅡㅡㅡㅡㅡㅡ.

 

div 는 상하좌우 마진이 다 되지만  인라인 요소는 스판은 위 아래 마진이 안되고  왼쪽 오른쪽 마진만 가능

 

그럼 스팬 태그를 블럭요소로 바꿔보자 

 

 

됬당 

 

 

margin 각각 주고 싶을때

             (위,아래), (왼쪽, 오른쪽) 

margin 30px 20px

 

margin 각각각각 다 주고 싶을때

margin  위 오른쪽 아래 왼쪽 

margin  30px , 30px 30px 30px

 

마진 컬렉싱이라는 개념을배우자 마진 상쇄라고 함

일단 코드좀 바꾸고

 

 

 

 

html 이 브라운색

body가 검은색

div가 파란색

 

그럼 div 에 마진 탑 10px 를 주면 위로 10px 생기겠지?

 

 

어. 파란색 밑으로 안오네 ?? 뭐지

바디에 마진을 주지 않았는데 바디가 위에 공간이 생김

그러면

 

마진 레프트를 줘보자 어떻게 되는지

 

이번엔 왼쪽에 공간이 생기네

 

박스요소들끼리 경계가 딱 부딪혓을때 마진 탑 바텀이 제대로 동작이 안할수 있다

컨텐츠가 같이 움직이는 현상이 발생하는건 아 맞다아서 같이 움직이구나 라고 생각하자

 

 

그럴때 패딩을 쓰면 된다 

 

마진 :  보더 밖에 잇는 간격

패딩: 보더 안에 있는  간격 

 

 

내부 간격을주기 위해서 패딩 필요

음 일단 코드정리좀 하고 

 

 

 

파란거 div

 검은색 body

브라운색 html

 

body 에 패딩을 줘봅시다

 

 

디브가 바디내부에서 30px 멀어진걸 알수 있다

라고 하는데 음.............................. 이해가 잘안가는데 난 이거.............

 

걍 패딩을 키워서 멀어졌다라고 이해하면되는건가??;

 

패딩 탑만 줘보자 

 

 

음 즉 패딩자체를 키우니깐 안에 요소들이 밀리는것처럼 보이는거 같은데 

div 에 마진 탑을 줘보자

 

이번엔 마진 상쇄 안되고 마진 잘 먹네 

 

 

div 태그 3개 만들고  padding 20px 줘보자 

 

왕.. 이상하게 변함 

다음 시간엔 id와 class 에 대해서 배우자 끝