、

、

……

、

---

  、

、
、、 、
  等。
要是只回答
那就说不过去了吧。
那它们之间的区别是什么呢？
·块级元素
  1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
  2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
  3.宽度没有设置时，默认为100%；
  4.块级元素中可以包含块级元素和行内元素。
·行内元素
  1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
  2.高度、宽度是不可控的，设置无效，由内容决定。
设置margin左右有效，有边距效果；
设置margin上下会撑大空间但是不会产生边距效果（即盒模型margin-top/bottom有值，但页面上没有边距效果）。
设置padding左右有效，设置padding上下会撑大空间但是不会产生边距效果（同上）。
padding效果如下展示：



   
      
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	
块级元素
	    行内元素
	    行内元素
	   
块级元素
   


 
  3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。
转换 
当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。
使用display属性能够将三者任意转换：
       (1)display:inline;转换为行内元素；
　　(2)display:block;转换为块状元素；
　　(3)display:inline-block;转换为行内块状元素。
行内块状元素综合了行内元素和块状元素的特性：
(1)不自动换行，与其他行内元素都会在一条水平线上排列；
(2)高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
(3)默认排列方式为从左到右。
到此这篇关于HTML行内元素与块级元素有哪些及区别详解的文章就介绍到这了,更多相关HTML行内元素与块级元素内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！

						
						


						


Tag：HTML   行内元素   块级元素   



						
					


相关文章






详解HTML常用的标签中行内元素和块级元素


							本文给大家详细介绍了HTML常用的标签中行内元素和块级元素，需要的朋友参考下吧
 2018-01-03 









清除行内元素之间HTML空白的几种解决方案


							行内块(inline-block)是非常有用的特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时，行内元素之间的空白有时候显示在屏幕上那是相当的讨厌
 2013-08-28 








						
					
					

最新评论










文章分类


HTML/Xhtml 
html5
CSS
XML/XSLT
Dreamweaver教程
Frontpage教程
心得技巧





大家感兴趣的内容


1iframe标签用法详解(属性、透明、自适应高度)


216进制颜色代码（完全）


340多个漂亮的网页表单设计实例


4定义input type=file 样式的方法


5HTML中让表单input等文本框为只读不可编辑的方法


6html中设置锚点定位的几种常见方法


7HTML 几种特别分割线特效 


8HTML iframe 用法总结收藏


9Html制作简单而漂亮的登录页面


10网页嵌入百度地图和使用百度地图api自定义地图的详细






最近更新的内容

HTML中Canvas关键知识点总结
html table+css实现可编辑表格的示例代码
HTML中使用Flex布局实现双行夹批效果
HTML+CSS实现炫酷登录切换的项目实践
HTML+CSS实现全景轮播的示例代码
圣诞节制作一颗HTML的圣诞树
如何将html的radio单选框自定义样式为正方形和对号
HTML介绍以及常用代码总结
HTML文档类型声明标签(入门级教程)
html网页制作代码大全(html常用标记)



						
					




							
						





			微信

			投稿

            脚本任务

			在线工具
		
		


关注微信公众号










			关于我们 -

			广告合作 -

			联系我们 -

			免责声明 -

			网站地图 -

			投诉建议 -

			在线投稿
		
©CopyRight 2006-2024 JB51.Net


var viewer = new Viewer(getid('content'));


        {

            "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",

            "@id": "https://www.jb51.net/web/724286.html",

            "appid": "1549322409310619",

            "title": "HTML行内元素与块级元素有哪些及区别详解",

            "description": "这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧",

            "pubDate": "2020-05-09T16:54:21",

			    "upDate": "2020-05-09T16:54:21"

        }