内边距padding


<!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>
发布了128 篇原创文章 · 获赞 24 · 访问量 4277

猜你喜欢

转载自blog.csdn.net/return_min/article/details/103830376