这篇文章主要介绍了css块级元素和行内元素的区别是什么，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联建站自2013年创立以来，是专业互联网技术服务公司，拥有项目网站制作、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元瑞昌做网站,已为上家服务,为瑞昌各地企业和个人服务,联系电话:028-86922220

css行内元素（inline element）

css行内元素也叫内联元素，行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

css行内元素的特点：

1、可以和其他元素处于一行，不用必须另起一行。

2、元素的高度、宽度及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字、图片的宽度，不可改变。

在介绍完css行内元素后，我们来看一看css行内元素有哪些？

css行内元素有哪些？

常见的css行内元素：

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： 下划线

接着，我们来看一看css块级元素和css行内元素的区别有哪些？

css块级元素和css行内元素的区别

css块级元素和行内元素的区别之一：

块级元素：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度。

行内元素：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    
    


块级元素1
块级元素2
行级元素1
行级元素2
 

效果如下：

css块级元素和行内元素的区别之二：

块级元素：块级元素可以设置宽高。

行内元素：行内元素不可以设置宽高。

实例：

    
    
    


        
块级元素一
        
块级元素二
        行内元素一
        行内元素二

效果如下：

注意：块级元素即使设置宽度也还是独占一行。

css块级元素和行内元素的区别之三：

块级元素：块级元素可以设置margin，padding。

行内元素：行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。

实例：

    
    
    


        
块级元素一
        
块级元素二
        行内元素一
        行内元素二    

效果如下：

注意：行内元素竖直方向的如padding-top和margin-bottom不会产生边距效果。

css块级元素和行内元素的区别之四：

块级元素：块级元素对应display:block。

行内元素：行内元素对应display:inline。

最后说一个属性：display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性。

说明：可以通过修改元素的display属性来切换行内元素和块级元素。

感谢你能够认真阅读完这篇文章，希望小编分享css块级元素和行内元素的区别是什么内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!

分享名称：css块级元素和行内元素的区别是什么-创新互联
标题来源：http://azwzsj.com/article/hscic.html