行内元素
HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。行内元素依靠自己的字体大小或者是图像大小来支撑结构, 一般不可以设置宽度,高度以及对齐等属性。默认的宽度就是他本身的宽度。
<p>This <span>span</span> is an inline element;its background has been colored to display both the beginning and end of the inline element's influence</p><style>span { background-color: #8ABB55; }</style>
注:<big> <tt> <acronym> 已被HTML5弃用
块级元素
块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。块级元素可以自由的设置宽度和高度。
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p><style>p { background-color: #8ABB55; }</style>
行内块元素
行内块具有行内与块级元素的特点,可以相互转化,常见的行内块标签<img />、<input />、<td>。
类型转化
转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块:display: inline-block;HTML的元素嵌套关系
块级元素可以包含行内元素。块级元素不一定可以包含块级元素 。比如div中可以包含div,但是p中不能包含div。行内元素一般不能包含块级元素。比如span中不能包含div。但是a中却可以包含div。备注:HTML5中 a > div是合法的,但是 div > a > div是不合法的,但是在HTML4.0.1中a > div仍然是不合法的。
●inline-block和block的唯一区别就是,不独占一行。
●行内元素的padding-top、 padding-bottom、 margin-top、 margin-bottom属性设置是无效的
●行内元素的padding-left、padding-right、 margin-left、 margin-right属性设置是有效的
●行内元素的padding-top、padding-bottom从 显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。
注:以上标签的具体用法与含义请参考MDN,MDN Web Docs ()。