网站导航:首页-网页制作语言-CSS中display属性中的三个值inline,block,inline-block的区别

CSS中display属性中的三个值inline,block,inline-block的区别

  本人在学习CSS时,经常分不清display中inline,block,inline-block三个值的区别,经过一系列查询,现将本人已掌握的知识分享出来供网友参考。

1、inline

  • 行内元素,前后不带换行符,不会独占一行;
  • 不能设置元素的height,width的值,大小由内容撑开;
  • 可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行。

2、block

  • 块级元素,前后带有换行符,独占一行,在不设置自己的宽度的情况下会填满父级元素的宽度;
  • 能够设置元素的height,width的值;
  • 可以设置padding,margin的各个属性值top,left,bottom,right都能够产生边距效果。

3、inline-block

  结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点,即

  • 行内元素,前后不带换行符,不会独占一行;
  • 能够设置元素的height,width的值;
  • 可以设置padding,margin的各个属性值top,left,bottom,right都能够产生边距效果。

已经到本页底线啦,您可以:返回目录页|返回首页