前端学习（76）：padding实现盒子模型小练习

最新推荐文章于 2021-05-04 02:22:39 发布

前端小歌谣

最新推荐文章于 2021-05-04 02:22:39 发布

阅读量360

点赞数 1

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/103448641

版权

本文是关于前端开发的学习笔记，重点探讨了如何使用padding来实现盒子模型的小练习，通过实例展示了padding在调整元素内边距和影响布局方面的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小练习</title>
    <style>
    #box1{
        width: 350px;height: 350px;border: 1px solid dashed;padding: 27px;
    }
    #box2{border:5px #d7effe solid;padding: 20px;}
    #box3{background-color: #ffa0df; padding: 41px;}
    #box4{border: 1px white dashed;padding: 3px;}
    #box5{border:1px white dashed;padding: 49px;}
    #box6{border:100px;height: 100px;background-color: #96ff38;border:#fcff00 5px solid}
    </style>
</head>
<body>
    <d