首页 > 试题广场 >

block，inline和inlinke-block细节对比

[问答题]

block，inline和inlinke-block细节对比？

查看答案及解析

Wordless

block独占一行，宽度继承父级，可设置宽高，但设置后还是独占一行。 inline不占一行，宽度随元素内容，不可设置宽高。 inline-block上面二者强强联合，可设置宽高，可同行。

发表于 2017-05-05 15:02:52 回复(0)

录音_笑

内联元素要分为可替换元素和非可替换元素。

可替换元素是指浏览器根据标签和它的属性来显示，比如img，input和a标签。

不可替换元素，比如p和span标签。

可替换元素都可以设置盒子模型的内边距，外边距，边框和元素宽高。

可替换元素在行内影响布局，在垂直方向不影响布局。

发表于 2020-04-01 22:19:16 回复(0)

牛客671231651号

block:元素独占一行，可设置宽高，默认宽是父级元素的100%,默认高是内容的高。四个方向的margin/padding均有效。

inline:和其他行内元素占一行，非替换元素不可设置宽高替换元素可以设置宽高。非替换元素在水平方向的margin/padding有效，竖直方向无效。替换元素在四个方向的margin/padding均有效。

inline-block：与其他元素在同一行，但是可以设置宽高，且四个方向的margin/padding均有效。

发表于 2020-02-29 14:46:23 回复(0)

火柴哥

block：块级元素，可以设置宽高，但是设置宽高后，仍然独占一行inline：行内元素，不会独占一行可以在一行里放置多个元素，直到放满才会换行。可以设置宽高，但是设置了也不会起作用inlink-block：行内块元素，具有以上两种的特征

发表于 2020-05-14 16:11:26 回复(0)

牛客4816597号

block自动填满一行元素其宽度为父元素百分百。inline元素不设置宽度则为本身宽度。inline_block元素既有块级元素的属性同时也不会直接占满一行

发表于 2018-02-26 14:08:39 回复(0)

提交观点

问题信息

上传者：牛妹

难度：

5条回答 444收藏 1561浏览

扫一扫，把题目装进口袋