예제)
<html>
<head><title>테두리</title>
<style type="text/css">
div {text-align:center;width:100px;height:100px;margin:10px;
border-width:10px;border-color:Orange}
</style>
</head>
<body>
<div style="border-style:none;float:left">none</div> (float:left -레이어 정렬방식)
<div style="border-style:solid;float:left">solid</div>
<div style="border-style:dotted;float:left">dotted</div>
<div style="border-style:dashed;float:left">dashed</div>
<div style="border-style:double;float:left">doubole</div>
<div style="border-style:groove;float:left">groove</div>
<div style="border-style:ridge;float:left">ridge</div>
<div style="border-style:inset;float:left">inset</div>
<div style="border-style:outset;float:left">outset</div>
</body>
</html>
<head><title>테두리</title>
<style type="text/css">
div {text-align:center;width:100px;height:100px;margin:10px;
border-width:10px;border-color:Orange}
</style>
</head>
<body>
<div style="border-style:none;float:left">none</div> (float:left -레이어 정렬방식)
<div style="border-style:solid;float:left">solid</div>
<div style="border-style:dotted;float:left">dotted</div>
<div style="border-style:dashed;float:left">dashed</div>
<div style="border-style:double;float:left">doubole</div>
<div style="border-style:groove;float:left">groove</div>
<div style="border-style:ridge;float:left">ridge</div>
<div style="border-style:inset;float:left">inset</div>
<div style="border-style:outset;float:left">outset</div>
</body>
</html>
- Tip -
margin : border밖의 여백
padding : border안의 여백
padding : border안의 여백
margin 속성
margin - 모든 방향의 여백을 지정
margin-top - 위쪽의 여백 지정
margin-bottom - 아래쪽 여백 지정
margin-left - 왼쪽여백 지정
margin-right - 오른쪽여백 지정
padding 속성
padding-top - 위쪽의 여백 지정
padding-bottom - 아래쪽 여백 지정
padding-left - 왼쪽여백 지정
padding-right - 오른쪽여백 지정
