css块级元素和行内元素的区别是什么-创新互联

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

css行内元素（inline element）

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

css行内元素的特点：

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

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

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

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

css行内元素有哪些？

常见的css行内元素：

接着，我们来看一看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块级元素和行内元素的区别是什么内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!