行内元素和块级元素:内联(行级)元素不能设置margin-top

内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素。

行内元素和块级元素

行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。

因此,行内元素适合显示具体内容,而块级元素适合做布局。常用的行内和块级元素如下:

级别 元素
行内元素 a,b,strong,span,img,label,button,input,select,textarea
块级元素 header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

之所以说“一般情况下”,是因为元素的级别不是一成不变的,浏览器是按照规范规定元素默认的级别,但是可以通过“display”属性改变其级别。


猜你喜欢

转载自blog.csdn.net/djjj123456789/article/details/80292758