728x90
(5) 패딩(padding)과 마진(margin)
1) padding
- 테두리와 콘텐츠 사이의 여백을 표현
- 패딩은 top, right, bottom, left 네방향을 설정
2) margin
- 테두리 바깥쪽 여백을 표현
- 요소와 요소사이의 여백을 표현
- 마진은 top, right, bottom, left 네방향을 설정
3)마진과 패딩은 작성법이 동일
margin:10px; → 모든방향이 마진 10px;
margin:10px 20px; → 상하, 좌우 동일
margin:10px 20px 30px; → 상, 좌우, 하
margin:10px 20px 30px 40px; → 상, 우, 하, 좌
margin-top:
margin-right:
margin-bottom:
margin-left:
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>패딩와 마진</title> <style type="text/css"> *{margin:0; paddin:0;} .test1{border:10px solid #000; padding:50px;} .test2{background-color:#f00; width: 400px; padding:20px;} /*width값을 선언하고 padding을 선언하면 값이 더해짐*/ /*w400+p20+p20=440px*/ .test3{background-color:#ccc; margin:20px;} .test4{background-color:#f00; margin:0 20px;} /*상하, 좌우 값이 같을 경우 함축해서 작성가능*/ </style> </head> <body> <h3>패딩 테스트</h3> <p class="test1"> 테스트테스트테스트테스트테스트테스트테스트테스트</p> <p class="test2"> 가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라가나다라</p> <br /> <h3>마진 테스트</h3> <p class="test3">test</p> <p class="test4"> 마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트마진테스트</p> </body> </html> |
■ 실행결과1
4) 상하 마진
■ 현재 요소에서 상하마진
- 형제 동생 요소의 상하마진이 만나는 경우 두 요소의 마진은 더해지지 않는다
- 큰값을 적용/같은 값일경우 하나의 값만 적용
bottom = 100, top = 100 마진은 100
bottom = 50, top = 100 마진은 100
- 마진은 하단마진을 권장함, 좌우마진은 정상계산
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>상하마진 문제</title> <style type="text/css"> *{margin:0; padding:0;} .test1{background-color:#f00; margin:50px;} .test2{background-color:#00f; margin:50px;} </style> </head> <body> <h2>현재 요소에서 상하마진</h2> <p class="test1">형</p> <p class="test2">동생</p> </body> </html> |
■ 실행결과2
■ 부모자식 요소의 상하마진
- 부모요소에 테두리, 패딩이 없는 경우 자식요소의 상하마진은 부모요소의 상하마진으로 전달되어 계산된다.
- 부모와 자식 사이의 여백중
상하여백은 → 패딩
좌우여백은 → 마진, 패딩
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>상하마진 문제</title> <style type="text/css"> *{margin:0; padding:0;} .parent{width:300px; background-color:#f00;} .parent .child{width:200px; height:200px; background-color:#0f0; margin:30px;} </style> </head> <body> <h2>부모자식요소의 상하마진</h2> <div class="parent"> <div class="child">자식 요소</div> </div> </body> </html> |
■ 실행결과
반응형