您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

盒子模型-contentpadding

盒子内容content

<div>content内容</div>

盒子内边距padding

padding属性用于设置内边距,即边框与内容之间的距离

属性作用
padding-left设置左内边距
padding-right设置右内边距
padding-top设置上内边距
padding-bottom设置下内边距

padding复合写法

padding 属性可以有 1~4 个值

值的个数表达含义
padding: 5px;1 个值,代表上下左右都是 5px 内边距
padding: 5px 10px;2 个值,代表上下内边距 5p,左右内边距 10px
padding: 5px 10px 20px;3 个值,代表上内边距 5px,左右内边距 10px,下内边距 20px
padding: 5px 10px 20px 30px;4 个值,上 5px,右 10px,下 20px,左 30px   顺时针

当我们给盒子指定 padding 值之后:

  1. 内容和边框之间有距离,添加了内边距
  2. padding 影响了盒子实际大小
  3. 也就意味着,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子

解决方案:

  1. width / height - 内边距大小

padding应用 新浪导航栏

当一行上的不同盒子的 content 内容长度不一致时,我们可以不设置盒子的宽度,而是直接设置盒子的左右边距。如此可以让界面设置更加合理美观

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新浪微博</title>
        <style>
            .nav {
                border-top: 3px solid #ff8500;
                border-bottom: 1px solid #edeef0;
                height: 41px;
                line-height: 41px;
                background-color: #fcfcfc;

            }
            .nav a {
                display: inline-block;
                text-decoration: none;
                color: #4c4c4c;
                padding: 0 20px;
            }
            .nav a:hover {
                color: #508fe2;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="#">新浪导航</a>
            <a href="#">手机新闻网</a>
            <a href="#">移动客户端</a>
            <a href="#">微博</a>
            <a href="#">新浪吧</a>
        </div>
    </body>
</html>

padding不会撑开盒子的方法

如果盒子本身没有指定 width / height 属性,则此时 padding 不会撑开盒子

1. 子元素未设置宽度,此时子元素的宽度为父容器的宽度

/* 父元素设置了宽度高度,而子元素并没有设置宽度/高度,此时给子元素设置padding,子元素的宽度并不会被撑大 */
div {
    width: 300px;
    height: 300px;
    background-color: darkblue;
}
div p {
    padding: 30px;
    background-color: red;
}

2. 子元素设置宽度

/* 父元素设置了宽度高度,而子元素也设置了宽度/高度,此时给子元素设置padding,子元素的宽度会被撑大 */
div {
    width: 300px;
    height: 300px;
    background-color: darkblue;
}
div p {
    width: 100%;
    padding: 30px;
    background-color: red;
}

3. 子元素设置高度

div {
    width: 300px;
    height: 300px;
    background-color: darkblue;
}
div p {
    height: 100%;
    padding: 30px;
    background-color: red;
}


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进