内边距padding

最新推荐文章于 2024-06-18 18:52:50 发布

原创最新推荐文章于 2024-06-18 18:52:50 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

web基础专栏收录该内容

22 篇文章

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

            border: 5px solid black;

            /*内边距 --- 内容和盒子边界的距离  会改变盒子的大小 */
            /*内边距 上 */
            /*padding-top: 20px;*/
            /*padding-left: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 20px;*/

            /*简写*/
            /*上下左右*/
            padding: 20px;
            /*上下  左右*/
            /*padding: 10px 20px;*/
            /*上  左右 下 */
            /*padding: 10px 20px 30px;*/
            /* 上 右 下 左*/
            /*padding: 10px 20px 30px 40px;*/

        }

    </style>

</head>
<body>


<div class="box">

    11111

</div>


</body>
</html>