【转载】img、input到底是行内还是块级元素？（替换元素 不可替换元素 行内替换元素 行内不可替换元素的学习）

【原文1：https://www.cnblogs.com/annie211/p/5933522.html】

【原文2：https://blog.csdn.net/qq_35765126/article/details/89047755】

问题：img、input到底是行内还是块级元素？

　　　为什么有的行内元素可以撑开父元素，有的不可以呢，行内元素设置padding、margin到底会不会生效呢？

　　　替换元素 不可替换元素 行内替换元素 行内不可替换元素的学习

学习总结：

1.img input属于行内替换元素，height/width/padding/margin均可用，效果等同于块元素

行内非替换元素的height / width / padding-top / padding-bottom / margin-top / margin-bottom 均无效果，只能用padding-left / padding-right / margin-left / margin-right 改变宽度

2.在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。

从元素本身的特点来讲，可以分为不可替换元素和替换元素

　　1.不可替换元素：

　　　　(X)HTML的大多数元素是不可替换元素，及其内容直接表现给用户端（例如浏览器）。

　　　　如： <h1>我是标题<h1>

　　2.替换元素：

　　　　替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

　　　　例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容

　　　　又如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等

　　　　(X)HTML中的img input  textarea select object 都是替换元素，这些元素没有实际的内容 即是一个空元素

　　　　替换元素一般有内在尺寸，所以具有width和height， 可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存时候的宽度和高度。

　　　　对于表单元素，浏览器也有默认的样式，包括宽度和高度。

　　3.行内替换元素设置padding margin 可以撑开父元素，行内非替换元素设置padding（四个方向）、margin-left、margin-right也生效，但是不会撑开父元素

【转载】img、input到底是行内还是块级元素？（替换元素 不可替换元素 行内替换元素 行内不可替换元素的学习）

原文：https://www.cnblogs.com/buerjiongjiong/p/11556050.html