block,inline和inline-block的区别

痴心易碎 提交于 2019-11-30 16:49:37

display:block

  1. 独占一行,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特点

  是block和inline元素的综合体:block元素不再独占一行,多个block元素可以同排一行,且元素具有block的属性,可设置宽高

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!