行内元素和块元素

行内元素和块元素

行内元素又叫内联元素,内联元素只能容纳文本或者其它内联元素

常见内联元素<span>,<a>

块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素,即使内容不能占满一行,块元素也要把整行占满

常见块元素<div>,<p>

块元素和行内元素的区别

1行内元素只占内容的宽度,块内元素不管内容多少要占全行

2行内元素只能容纳文本和其它行内元素,块内元素可以容纳文本,行内元素和块元素(与浏览器版本和类型有关)

3一些CSS属性对行内元素不生效,比如margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器版本和类型有关)

块元素和行内元素可以转换

如果我们希望一个元素按照块元素方式显示,则display:block

如果我们希望一个元素按照行内元素方式显示,则display:inline

下面举个例子

my.css