区别:

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;

块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

转载于:https://www.cnblogs.com/qq254980080/p/10287344.html

HTML中行内元素与块级元素的区别相关推荐

  1. html中的行内标签吗,HTML标签中行内元素和块级元素详解

    本文主要和大家详细介绍了HTML常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家. 块元素(block element) HTML标签分类明细 * address - 地址 * b ...

  2. css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose

    行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...

  3. 【HTML】行内元素与块级元素

    一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...

  4. 行内块元素有哪些标签_html的行内元素与块级元素总结

    希望大家补充一下常见的块级元素与行内元素~ 如有错误,请大家在评论区指出,一起进步! 一.区别 二.常见的块级元素: p:段落标签 div:把DIV看作是一容器,容器专门用来包含内容 h1.h2- - ...

  5. 内联元素与块级元素及内外边距的影响

    内联元素与块级元素 块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素 常用的块级元素:div.h1~h6.dl. ...

  6. 行内元素和块级元素的区别

    1.常见行内元素和块级元素 (1)行内元素 <span>.<a>.<br>.<b>.<strong>.<img>.<inp ...

  7. html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中

    首先我们先了解一下行内元素和块级元素 行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...

  8. [css] 行内元素和块级元素有什么区别,如何相互转换?

    [css] 行内元素和块级元素有什么区别,如何相互转换? 一般通过display属性来区分块级元素和行内元素,block代表块级元素,inline代表行内元素. 块级元素: 1.内容独占一行. 2.w ...

  9. html中内联元素和块级元素的区别(整理版)

    块级元素和内联元素的主要区别 块级元素 内联元素(即行内元素) 总是在新行上开始,独占一行默认情况下,宽度自动填满其父元素 相邻的行内元素会排列再同一行里,直到一行排不下,才会换行,宽度随元素的内容而 ...

最新文章

  1. webpack基本用法
  2. java 判断数的位数_Java判断数字位数的两种方法
  3. html交互式添加线要素,HTML5 Canvas绘制交互式交叉线
  4. 传统的6d位姿估计fangfa1_你的厨房被水淹了!别担心,这只是3D深度估计做出的特效...
  5. postgresql测试题_PostgreSQL练习
  6. java:蓝桥杯 矩阵乘法
  7. CentOS7 安装 Node.js
  8. 知识管理系统Data Solution研发日记之十二 网页数据抓取Fetch,呈现Render,导出Export...
  9. Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine
  10. Friday the Thirteenth
  11. Android学习——LitePal源码分析
  12. Centos彻底完全删除已安装软件的办法
  13. sqlServer基础知识
  14. python计算无穷级数求和常用公式_幂级数n=0到∞∑ x^n/的和函数怎么求 级数求和问题:求:∑1/...
  15. Ubuntu 配置亚马逊 aws cli 上传文件文件夹至 亚马逊 AWS S3
  16. truffle init error,unbox Downloading报错问题
  17. 利用干支年反推公元年份的计算公式推导
  18. 使用docker搭建xss挑战之旅环境,操作步骤配截图。
  19. 哪些食物不能一起吃!!!!
  20. win10如何设置某软件为系统默认程序(应用)?

热门文章

  1. 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1106:年龄与疾病
  2. 【Linux】一步一步学Linux——ipcrm命令(142)
  3. 【Linux】一步一步学Linux——pkill命令(126)
  4. 【Linux驱动】linux内核模块简介
  5. linux 读写时间变长,linux时钟变慢的原因分析【转】
  6. sql like 绑定变量_码硬解析的改进方法之二使用绑定变量
  7. python3.6字典有序_一日一技:Python 3.6以后,字典有序
  8. MySQL的MyISAM和InnoDB存储引擎表结构
  9. 【读书笔记】沉默的大多数
  10. 51nod 1127 最短的包含字符串(尺取法)