HTML+CSS Easy to Get Started with the Boundary of the Box Model

The distance between elements and other elements can be set using margin. Boundaries can also be divided into upper, right, lower and left

Let’s write an example to explain;

First we write a piece of code that does not use boundaries:

<!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>

The two divs are together. If I want the distance between the two divs to be 30 pixels, how should I write the css code?

#dv2{margin-top:30px;}

When we add this code, there will be a distance between the two divs

Friends, you can try the right side, bottom side, and left side respectively to see what kind of effect you get

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

HTML+CSS Easy to Get Started with the Boundary of the Box Model

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]