码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈padding

时间:2018-07-18 23:27:25      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:部分   jad   说明   eww   fnr   eid   snr   rdp   通过   

深入浅出padding

padding是CSS盒子模型的一部分,代表盒子模型的内边距。

用法

padding属性有四个值,分别代表上、右、下、左的内边距。

.box {
  padding: 10px 5px 15px 20px;
}

此时,.box的内边距为:

  • 上内边距:10px
  • 右内边距:5px
  • 下内边距:15px
  • 左内边距:20px

简写

padding属性的值可以简写,按照值的数量可以分为三种情况:

1.单个值
.box {
  padding: 10px;
}

此时,.box的内边距为:

  • 上内边距:10px
  • 右内边距:10px
  • 下内边距:10px
  • 左内边距:10px
2.两个值
.box {
  padding: 10px 5px;
}

此时,.box的内边距为:

  • 上内边距:10px
  • 右内边距:5px
  • 下内边距:10px
  • 左内边距:5px
3.三个值(重点)
.box {
  padding: 10px 5px 15px;
}

此时,.box的内边距为:

  • 上内边距:10px
  • 右内边距:5px
  • 下内边距:15px
  • 左内边距:5px

tips:实际使用时,大多数人都会使用单个值、两个值、四个值的写法,三个值的写法常常被忽略,所以需要重点了解三个值的简写写法。

特性

1.行内元素设置的内边距不会影响行高计算

当对行内元素设置内边距时,内边距不会影响内联元素的行高,但是会撑开背景。

<span class="text">我是行内元素</span>
<div class="text-bottom">朕的背景!!!</div>
span {
    padding: 10px;
    background: #cccccc;
}

.text-bottom {
    height: 200px;
    background: #000;
}

效果如下:

技术分享图片

可以发现:行高并没有变化,背景按内边距撑开的面积显示,细心的话可以发现,背景延伸到了其他行,并发生了重叠,并没有挤开其他行,这也进一步说明了行高并没有改变。

2.不允许使用负值

padding不像margin可以使用负值,因为,margin再怎么用,也不会影响盒模型的宽度、高度,而padding身为盒模型的内边距,会直接影响盒模型的宽度、高度。并且,padding设为负值并没有意义,直接修改content一样可以达到效果。

可能的值

描述
auto 浏览器计算内边距
length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的内边距
inherit 规定应该从父元素继承内边距

tips:padding常用的写法是使用length,比如padding: 10px。但是,有时使用百分比可以实现一些骚操作,比如实现一个自适应的正方形:

.box {
    float: left;
    width: 100%;
    padding-bottom: 100%;
    background: #cccccc;
}

效果如下:

技术分享图片

可以看到,通过padding-bottom: 100%实现了一个自适应的正方形。

浅谈padding

标签:部分   jad   说明   eww   fnr   eid   snr   rdp   通过   

原文地址:https://www.cnblogs.com/karthuslorin/p/9330089.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!