여백

<여백>-------------------------------------------------------------

 

▼기본 여백 값 없애기

▷ * =  body안 모든것을 포함
▷margin : 바깥여백
▷padding : 안쪽여백

ex)
 
    *{margin: 0px; padding:0px;}
    .m50{margin-bottom: 50px;}

▼ 바깥여백 (margin)
▷네모난 박스를 기준으로 밖으로 나가는 여백

▼바깥여백 없애기
▷margin- '방향' : 수치px;
 ㄴmargin-top : 박스를 기준으로 위로 바깥여백
 ㄴmargin-bottom : 박스를 기준으로 아래로 바깥여백
 ㄴmargin-right :박스를 기준으로 오른쪽 바깥여백
 ㄴmargin-left : 박스를 기준으로 왼쪽 바깥여백
 ㄴmargin = 네방향으로 바깥여백
 ㄴmargin : '숫자1'; '숫자2'; = 위에서부터 시계방향으로 바깥여백 (마주보는 각과 값이 같음)
 ㄴmargin : '숫자1'; '숫자2'; '숫자3'; = 위 1; 우 2; 하 3; 좌2;
 ㄴmargin : '숫자1'; '숫자2'; '숫자3'; '숫자4'; = 위 1; 우 2; 하 3; 좌 4;

ex)
 
      *{margin: 0px; padding :0px;}
      p{margin-left: 40px;margin-top: 40px;}
      h2{margin : 50px;}
      h2{margin : 50px 100px;
      h1{margin : 20px 40px 30px 50px; 
  

▼통합마진
▷마진이 겹치면 큰마진만 적용됨 (합쳐서 적용되지 않음)

▼안쪽여백 (padding)
▷네모난 박스를 기준으로 안으로 들어오는 여백
▷background 색상이 적용됨
▷적용시 크기가 커짐

 

▼자동여백
▷ auto

 ㄴex)
     
        *{margin: 0px; padding: 0px;}
        div{width: 200px; border: 1px solid rgb(140, 240, 140);
            margin: 50px auto; padding:10px 20px;}

▼박스테두리
▷border: 테두리 태그
▷solid: 테두리 색상

 ㄴex)
   p{background: #ccc; padding:30px; border: 2px solid #333;}

▷border-radius: 테구리를 둥글게
 -border 없이 별도로 사용가능
 
 ㄴex)
    h1{background: blue; border-radius: 10px;}

 

▼웹창에서 F12를 눌러 스타일을 확인할 수 있음
▷적용된 스타일을 체크해 적용전 상태를 확인할 수 있음

▼글자간격
▷letter-spacing
 ㄴ'+숫자' 는 넓히고 '-숫자'는 좁힘

ex)

<style>
  h3{letter-spacing: 10px;}
</style>