728x90
padding과 margin의 공통점은 둘다 여백이라는 점이다.
그 중에서 나뉜다면 안쪽여백과 바깥여백이 있는데
margin은 바깥여백
padding은 안쪽여백 이다.
<body>
<div id="item1">패딩10px</div>
<div id="item2">마진10px</div>
</body>위 태그 구조에 스타일을 입혀봤다.
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: lightcyan;
}
div{
width: 100px;
line-height: 100px;
text-align: center;
}
#item1{
padding: 10px;
background-color: bisque;
}
#item2{
margin: 10px;
background-color: burlywood;
}
</style>
스타일을 적용시키면 다음과 같다.
padding은 다음과 같다.
보더 안의 패딩이라는 영역에서 상하좌우 10px씩 늘어난 것을 볼 수 있다.
그래서 아이템을 선택했을시 120x120로 늘어난 것을 볼 수 있다.
한마디로 안쪽에서 부풀어 오른것이라고 생각하면 쉽다.
그에 반해 마진은 보더 밖의 값이 상하좌우로 10px씩 늘어났다.
보더 밖이므로 아이템자체에는 영향이 없다.
다만 바깥여백이 늘어난것이므로 아이템자체가 10px씩 배경이든 아이템이든 다른 무언가로부터 띄어진다.
728x90