div的样式之padding

最新推荐文章于 2023-07-26 10:34:49 发布

summer_sun_tree

最新推荐文章于 2023-07-26 10:34:49 发布

阅读量2.2k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45637488/article/details/115420029

版权

padding：内容和边框之间的距离设置padding宽度后，会发生在原有基础上发生扩张，背景颜色与div盒子的background-color相同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

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

padding：内容和边框之间的距离

设置padding宽度后，会发生在原有基础上发生扩张，背景颜色与div盒子的background-color相同。

<!-- 内边距(padding)：内容和边框之间的距离 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background-color: red;
            border: 1px solid #000;
        }

        /* 设置padding后，宽高改变，因为内容宽高不变，加上padding后扩张
           且背景颜色和内容background-color一样 */
        .box1{
            padding-top: 20px;
        }
        .box2{
            padding-right: 40px;
        }
        .box3{
            padding-bottom: 80px;
        }
        .box4{
            padding-left: 160px;
        }
        .box5{
            paddi

最低0.47元/天解锁文章

summer_sun_tree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div的样式之padding

padding：内容和边框之间的距离设置padding宽度后，会发生在原有基础上发生扩张，背景颜色与div盒子的background-color相同。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
复制链接

扫一扫