상자 모델--테두리

요소와 다른 요소 사이의 거리는 여백을 사용하여 설정할 수 있습니다. 경계는 위쪽, 오른쪽, 아래쪽, 왼쪽으로 나눌 수도 있습니다. 다음 코드:

div{margin:20px 10px 15px 30px;}

를 별도로 작성할 수도 있습니다.

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리가 모두 10px인 경우 다음과 같이 작성할 수 있습니다. >

div{ margin:10px;}

상하 테두리가 10px 같고, 왼쪽과 오른쪽이 20px 같다면 이렇게 쓰면 됩니다.

div{ margin:10px 20px;}

요약하면 패딩과 여백의 차이는, 패딩은 테두리 내부에 있고 여백은 테두리 외부에 있습니다.

아아아아

다음 섹션

새로운 파일

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
 width:300px;
 height:300px;
 border:1px solid red; 
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
 <div id="box1">box1</div>
 <div id="box2">box2</div> 
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면