行内宽高设置无效的解决

先理解什么是块状元素和行内元素 。

块状元素不允许同一行内有其它元素出现,所以你用两个p标签的话,p是从上到下依次排列的.

块状元素是可以设置任意的高宽,margin,padding等属性的,

块元素(block element) 
  ◎ address - 地址◎ blockquote - 块引用◎ center - 举中对齐块◎ dir - 目录列表◎ div - 常用块级容易,也是css layout的主要标签

  ◎ dl - 定义列表◎ fieldset - form控制组◎ form - 交互表单◎ h1 - 大标题◎ h2 - 副标题◎ h3 - 3级标题◎ h4 - 4级标题◎ h5 - 5级标题

  ◎ h6 - 6级标题◎ hr - 水平分隔线◎ isindex - input prompt◎ menu - 菜单列表◎ ol - 排序表单◎ p - 段落

       ◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

  ◎ pre - 格式化文本◎ table - 表格◎ ul - 非排序列表


行内元素的话,可以在同一行内有多个行内元素,不会单独的占有一行,而是挨着显示的。如a标签,可以在同一行有几十个等等...

行内元素的话,自身是不可以设宽高,(input是个例外,可以独立设置宽/高)。

padding的,margin只可以设置左右,而上下就无法设置.行内元素要设置宽高,

内联元素(inline element) 
  ◎ a - 锚点◎ abbr - 缩写◎ acronym - 首字◎ b - 粗体(不推荐)◎ bdo - bidi override◎ big - 大字体◎ br - 换行◎ cite - 引用
  ◎ code - 计算机代码(在引用源码的时候需要)◎ dfn - 定义字段◎ em - 强调◎ font - 字体设定(不推荐)◎ i - 斜体
  ◎ img - 图片◎ input - 输入框◎ kbd - 定义键盘文本◎ label - 表格标签◎ q - 短引用◎ s - 中划线(不推荐)
  ◎ samp - 定义范例计算机代码◎ select - 项目选择◎ small - 小字体文本◎ span - 常用内联容器,定义文本内区块
  ◎ strike - 中划线◎ strong - 粗体强调◎ sub - 下标◎ sup - 上标◎ textarea - 多行文本输入框◎ tt - 电传文本
  ◎ u - 下划线◎ var - 定义变量

用display:inline|block|inline-block等属性可以转换他们的类型,使得它们可以拥有别的类型的元素的特性.

给a设置display:block之后,就可以给它设置宽高等等,

给div设置display:inline之后,可以在 同一行有多个div.


如果设置display:block,width属性生效,但是此时的span跟div一样了。

如果设置display:inline-block,则span并列在同行,而且width属性生效。 

元素display属性的常见值说明: 

block:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。 

inline:内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行。(内联) 

原文地址:https://www.cnblogs.com/2oveyou/p/2391653.html