HTML+CSS 상자 모델의 경계로 쉽게 시작하기

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

설명을 위해 예를 작성해 보겠습니다.

먼저 경계를 사용하지 않는 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
        width:200px;
        height:200px;
        border:1px solid red;
      }
  </style>
</head>
<body>
    <div id="dv1">php中文网</div>
    <div id="dv2">中华民族伟大复兴</div>
</body>
</html>

두 div가 합쳐져 있는데 두 div 사이의 거리가 30픽셀이 되도록 하려면 CSS 코드를 어떻게 작성해야 하나요?

#dv2{margin-top:30px;}

이 코드를 추가하면 두 div 사이에 거리가 생깁니다.

친구 , 오른쪽, 아래쪽, 왼쪽을 각각 시험해 보시면 어떤 효과가 있는지 확인하실 수 있습니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:200px; border:1px solid red; } </style> </head> <body> <div id="dv1">php中文网</div> <div id="dv2">中华民族伟大复兴</div> </body> </html>

제출하다 코드 재설정

자동운전