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

block、inline、inline-block对比

时间:2017-02-16 01:23:43      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:margin   top   idt   水平   自动   设置   行内元素   bottom   内联对象   

display:block

  1.block元素会独占一行,多个block元素会各种新起一行。默认情况下,block元素宽度自动填满其父元素容器;

  2.block元素可以设置width和height属性,块级元素即使设置宽度还是会独占一行;

  3.block元素可以设置margin和padding;

display:inline

  1.inline元素不会独占一行,多个相邻的行内元素会排在同一行里,直到一行排列不下,才会新起一行,起宽度随元素内容而变化;

  2.inline元素设置width和height无效;

  3.inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果;

display:inline-block

  1.将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。比如我们给a标签inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性;

block、inline、inline-block对比

标签:margin   top   idt   水平   自动   设置   行内元素   bottom   内联对象   

原文地址:http://www.cnblogs.com/lovefeng/p/6403919.html

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