0.inline元素中的padding

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

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

<div class="wrap">

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

</div>

* {margin:; padding:;}

.wrap {

  width: 400px;

  height: 500px;

  margin: 50px auto;

  border: 1px solid #ccc;

}

.con {

  padding: 8px;

  background-color: #f32;

}

效果图：

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:; padding:;}

.wrap {

  width: 400px;

  height: 800px;

  margin: 50px auto;

  border: 1px solid #ccc;

  font-size:;

}

.con {

  display: inline-block;

  padding: 25%;

}

.red {background-color: red;}

.green {background-color: green;}

.yellow {background-color: yellow;}

.blue {background-color: blue;}

巴特西

CSS属性之padding

0.inline元素中的padding

1.百分比值的padding

最新文章

热门文章