-
padding, margin 이란?Web/HTML5 웹 프로그래밍 입문 2019. 9. 14. 22:49
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>
'Web > HTML5 웹 프로그래밍 입문' 카테고리의 다른 글
Apache와 Tomcat의 차이? (0) 2020.04.03 HTML5 웹 프로그래밍 입문 5장 (0) 2019.08.07 HTML 웹 프로그래밍 입문 4장 (0) 2019.07.24 HTML 웹 프로그래밍 입문 3장 (0) 2019.07.22 HTML5 웹 프로그래밍 입문 2장 연습문제 (0) 2019.07.17
