行内元素如何设置宽高

行内元素如何设置宽高

常用内联元素:span img a button input l abel select textarea q strong br i em 等

常用块级元素:div p h1…h6 ol ul dl table form…

块级元素(block)特点
1.每个块级元素都独占一行 其宽度自动填满其父元素宽度。
2.但可以设置其宽度与高度
3.可以设置其外边距(margin)与内边距(padding)

常给a标签设置display:block属性 此时a标签整体都可点击

内联元素(inine)特点
1.内联元素会排列在同一行 他们只需要必要的宽度,一行排不下时才换行
2.行内元素设置宽度 高度width height无效(替换元素除外
3.边距只有margin-left margin-right padding-left padding-right起效果。
4.行内元素只能容纳文本或者其他行内元素。(如放入块级元素会撑大行内素

内联块元素
当元素设置为display:inline-block时 它具有内联元素不独占一行的特 性,同时具有块级元素可设置宽高的特性。
注:没有元素默认为内联块元素

行内元素怎么设置宽高?
1.给行内元素设置display:block或者display:inline-block;
2.行内元素还可以通过添加float或设置position定位使其浮动来设置宽高,因为不论什么元素本身是什么,当它浮动时就会生成一个块级框;
3.一些内联元素为替换元素 如img input textarea select 等… 他们默认可设置宽高

你可能感兴趣的:(行内元素如何设置宽高)