padding,margin 개념

BBOrong_22·2022년 4월 3일

스파르타 원정

목록 보기
5/52

📢여백의 개념

🧪버튼에 padding과 margin을 이용해서 여백 조절을 할것이다.

🎈<button>에 "mybtn"으로 명찰 달아주기

<button class="mybtn">로그인하기</button>

🎈style안에서 지칭해서 padding(내 안쪽으로): 20px; 두기

 <style>
   	 .mybtn {
            padding :20px;
        }
 </style>       

🎈이번에는 margin(내 바깥쪽으로): 20px; 두기

      .mybtn {
            margin : 20px;
        }
    </style>

🎈여기서
margin-top(위쪽에서 바깥쪽으로): 20px;
margin-left(왼쪽에서 바깥쪽으로): 30px;

    .mybtn {
                margin-top: 20px;
                margin-left: 30px;
            }
        </style>

🎈위에 사항과 똑같이 나올수 있는 유용한 팁

margin: 20px 0px 0px 30px (시계방향으로 위쪽,오른쪽,아래,왼쪽순으로 margin을 준다.)

  .mybtn {
           margin :20px 0px 0px 30px
		 }
    </style>
profile
아 스파르타 복습해야한다..

0개의 댓글