css入门5：盒子

最新推荐文章于 2025-05-07 14:36:36 发布

inch2006

最新推荐文章于 2025-05-07 14:36:36 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/inch2006/article/details/80429493

本文通过一个实例详细介绍了HTML元素的布局方式，特别是如何使用margin(外边距)、border(边框)、padding(内边距)等属性来调整元素的空间布局。文中展示了这些属性在实际网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所有html元素可以看做一个盒子，相关的属性代表的意思如下：

margin:外边距

border:边框

padding:内边距

<html>

<head>
  <style>
    div {
      background-color: lightgrey;
      width: 100px;
      height: 100px;
      border: 10px solid green;
      padding: 30px;
      margin: 100px;
      text-align: center;
    }

    h1 {
      background-color: lightgrey;
      width: 100px;
      height: 100px;
      border: 10px solid green;
      padding: 30px;
      margin: 100px;
      text-align: center;

    }
  </style>
</head>

<body>

  <h1>this is a h1</h1>


  <div>
    this is a div
  </div>


</body>


</html>

得到结果如下：