CSS 마진 패딩 질문있습니다.
본문
이때까지 css에서 margin이랑 padding를 중구난방식으로 막 썼는데
어디서는 마진을 쓰고 어떤곳에는 패딩을 쓰고... 그런게 있을까요?
보통은 거의 마진을 썼습니다.
답변 5
쉽게 생각하시면 margin은 요소간의 사이를 띄울때, padding은 요소 내부의 간격을 조정할때 사용하시면 됩니다.
예를들어 버튼 두개가 있을때 버튼 간의 간격이 좁아 띄우고 싶을때 margin
버튼 내부의 여백을 두고싶을때 padding
margin과 padding의 차이점
margin과 padding은 모두 요소 주변의 공간을 조절하는 CSS 속성이지만, 어디에 공간을 추가하는지에 있어서 차이가 있습니다.
1. margin
margin은 요소 외부에 여백을 추가합니다. 즉, 요소와 다른 요소 사이의 간격을 조절하는 데 사용됩니다.
예시:
두 개의 버튼 사이에 여백을 추가하여 구분하기
텍스트와 테두리 사이에 여백을 추가하여 여유를 주기
2. padding
padding은 요소 내부에 여백을 추가합니다. 즉, 요소의 내용과 테두리 사이의 간격을 조절하는 데 사용됩니다.
예시:
텍스트와 요소 테두리 사이에 여백을 추가하여 여유를 주기
이미지와 요소 테두리 사이에 여백을 추가하여 여유를 주기
비유:
margin은 사람과 사람 사이의 거리와 같습니다.
padding은 옷 안에 입는 속옷과 옷 사이의 여유와 같습니다.
각 속성이 어디에서 사용되어야 하는지 명확히 정해진 룰은 없으므로
필요한 곳에 적절히 사용되면 됩니다.
https://www.w3.org/wiki/Css/Training/padding_and_margin
<style>
ul.navi {
list-style-type: none;
width: 30%;
margin: auto;
padding: 0;
}
ul.navi li a {
display: block;
background-color: #eee;
padding: 1em;
}
</style>
<ul class="navi">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
</ul>
마진: 내 집 담장과 남의 집(=외부요소) 담장과의 거리.
패딩: 내 집의 담장(border)과 내 집(contents)과의 거리.
천천히 예제 하나하나 음미하면서 개념을 잡아보세요.
https://homzzang.com/b/css?sca=box