Border, Margin, Padding 경계선, 테두리, 외부 내부 여백

FrontEnd/HTML

Border, Margin, Padding 경계선, 테두리, 외부 내부 여백

H_Develop 2022. 6. 17. 16:31

박스 모델
  경계선 Border
solid 실선, dotted 점선, dashed 파선, double 이중선 // dashed 보다 dotted의 점이 더 얇음
      3D   (groove, ridge), (inset, outset) 등 // 두가지 씩, 같은 스타일에 다른 방향.
// 한 색상을 정하면 다른쪽은 진한 색상으로 따라옴
border-radius : 100px; border-radius (radius 반지름 r)보더 꼭지점 부터 둥근 형태가 px만큼 적용
외부 여백 Margin
margin-top margin-bottom margin-left margin-right
{margin : 10px 20px 30px  40px;} // top right bottom left ( top 기준 시계방향 )
* margin 과 테크의 margin 값이 중복되면, 큰 값이 적용된다.
내부 여백 Padding

Margin Border Padding

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

p {margin : 50px; border : solid 10px green; padding : 30px;}

</style>
</head>
<body>

<p>ddd</p>

</body>
</html>

<!--
margin : 50px  / border : solid 10px green / padding : 30px;
외부 여백 50px / 경계선 실선, 10px, 초록 / 내부 여백 30px
-->

Border

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 p {margin : 50px; border : double 10px blue; padding : 30px;}
</style>
</head>
<body>
 <p> BOX_MODEL </p>
 <h3 style="border:solid 3px purple;">박스 모델이란 ?</h3>
 <h3 style="border:dotted 3px blue;">박스 모델이란 ?</h3>
 <h3 style="border:dashed 3px red;">박스 모델이란 ?</h3>
 <h3 style="border:double 3px yellow;">박스 모델이란 ?</h3>
 <h3 style="border:groove 3px green;">박스 모델이란 ?</h3>
</body>
</html>
<!--
 p {margin : 50px; border : solid 10px green; padding : 30px;}
 	외부			  테두리					 내부
-->

Margin 외부 영역

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 * {margin : 50px;}
 #a {margin-top : 10px; margin-bottom : 100px; background-color : blue;}
 #b {margin-left : 10px; background-color : blue;}
</style>
</head>
<body>
 <div id="a">aaaa</div>
 <div id="b">bbbb</div>
</body>
</html>
<!--
* {margin:0;}  -  * 은 모든 선택자, body와 모든 테그들의 모든 마진은 0으로 초기화.
* margin: 50px; 은 html, body, id a,b 모든 공간에 적용되며,
id a의 margin-top:10px; 을 제외한, right bottom left 는 * margin으로 인해 50px이 적용
div id a와 b가 만나는 구간은 margin이 더 큰 값이 적용됨
-->

Padding 내부 영역

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 h3 {border : solid 10px green;}
 p  {border : solid 10px red;}
</style>
</head>
<body>
 <h3 style="padding : 20px;">박스 모델</h3>
 <p style="padding : 50px 40px 300px 20px;">웹 페이지 기반</p>
 <p style="padding : 100px 20px;">CSS 기반</p>
</body>
</html>
<!--
<p style="padding : 100px 20px;">CSSS 기반 ㅎㅎ.. </p>
	100px top and bottom 20px left, right
-->