CSS属性之padding

0.inline元素中的padding

大家都知道padding对于block元素和inline-block元素的影响,而对于inline元素,padding只会在水平方向产生影响,垂直方向不会产生影响。

这么说其实不准确,给inline元素设置垂直方向的padding,不会改变元素的高度,也不会影响其他元素,但是会改变他自身的背景的高度。

<div class="wrap">
  这是一小段文字,但是在这段文字当中有一个inline元素span,<span class="con">这就是span</span>,垂直方向上的padding不会影响其他元素,但是同样会改变他自身的背景大小
</div>

 

* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 500px;
  margin: 50px auto;
  border: 1px solid #ccc;
}
.con {
  padding: 8px;
  background-color: #f32;
}

效果图:

684501-20170208141624354-1421484447.png

1.百分比值的padding

对于inline-block元素和block元素,当元素的padding值为百分比的时候,其实际的padding值等于父元素的宽度*百分比值;

对于绝对定位元素而言,实际padding值等于第一个相对定位的父元素的宽度*百分比。

 

通过这个特点,我们可以实现一些比较有意思的效果,比如通过inline-block元素来实现响应式的正方形。

<div class="wrap">
  <div class="con red"></div>
  <div class="con green"></div>
  <div class="con yellow"></div>
  <div class="con blue"></div>
</div>
* {margin:0; padding:0;}

.wrap {
  width: 400px;
  height: 800px;
  margin: 50px auto;
  border: 1px solid #ccc;
  font-size: 0;
}
.con {
  display: inline-block;
  padding: 25%;
}
.red {background-color: red;}
.green {background-color: green;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}

684501-20170208144145947-1323306347.png

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值