padding, margin 이란?
padding은 border의 안쪽 구간
margin은 border의 바깥 구간
padding-top, padding-right, padding-down, padding-left 로 각각의 값을 줄 수 있지만
padding: 10px 10px 10px 10px; 로 사용하면 시계방향으로 ( 상 우 하 좌 ) 로 적용할 수 있다.
padding: 10px 10px; 로 사용하면 (상하, 좌우) 가 적용되고
padding: 10px; 로 사용하면 ( 상하좌우 ) 에 모두 적용된다.
( margin 역시 동일하다)
border에는
1) border-width
2) border-style
3) border-color 가 있다.
역시
border 10px solid red (size, style, red) 로 적용 가능하다.
예시 )
빨간부분 주석 처리 시
주석 제외 시
코드 ( html )
<html>
<head>
<style>
body, html {
padding: 0;
margin: 0;
background-color: red;
height: 100%;
}
.box{
background-color : green;
width: 50%;
height: 50%;
padding: 50px;
margin: 40px;
}
.box2{
background-color: blue;
width: 50%;
height: 50%;
border: 5px solid yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>