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

阿鲁科尔沁网站建设公司创新互联建站,阿鲁科尔沁网站设计制作，有大型网站制作公司丰富经验。已为阿鲁科尔沁上千多家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的阿鲁科尔沁做网站的公司定做！

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://myzitong.com/article/ihoehh.html