HTML⾏内、块级、空（void）元素以及区别，外加对应元素的整理
本⽂总结内容: “⾏内、块级、空(void)” 元素：
1. 什么是⾏内元素、块级元素、空(void)元素?
2. ⾏内元素和块级元素有什么区别?
3. ⾏内元素有哪些? 块级元素有哪些? 空(void)元素有那些？
废话不多说, 直接上代码以及图例(为了让⼤家⽅便阅读, 都有⾃⼰验证过程的⼀些图例作为分享) 。
⼀: 什么是⾏内元素、块级元素、空(void)元素:
1.⾏内元素、块级元素概念:
1.每⼀个⽹页元素(html标签)都有⼀个 display 属性,⽤于确定该元素的类型;
2.每⼀个元素都有默认的 display 属性值,⽐如 div 元素，它的默认 display 属性值为"block"，称为“块级”元素(block-level);⽽ span 元素的默认 display 属性值为"inline"，称为"⾏内"元素。
2.⾏内元素:
1.没有⾃⼰的独⽴空间，和有他元素都在⼀⾏上，它是依附于其他块级元素存在的;
2.⾼度、⾏⾼、外边距、内边距都不可改变，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的;
3.⽂字的宽度不可改变，只能容纳⽂本或者其他⾏内元素，其中'img'是⾏元素。
3.块级元素:
1.会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦。
⼆: ⾏内元素和块级元素有什么区别：
1.默认 dispalay 属性:
1.块级：display: block;
2.⾏内：display: inline;
2.排版时的占据空间:
1.块级：块级元素会独占⼀⾏，默认情况下宽度⾃动填满其⽗元素宽度。
2.⾏内：⾏内元素不会独占⼀⾏，相邻的⾏内元素会排在同⼀⾏。其宽度随内容的变化⽽变化。
3.设置宽⾼ width, height:
1.块级：块级元素可以设置宽⾼。
2.⾏内：⾏内元素不可以设置宽⾼(设置宽⾼后不⽣效)。
4.设置 margin, padding:
1.块级：块级元素可以设置 margin, padding 。
2.⾏内：⾏内元素⽔平⽅向的 margin-left; margin-right; padding-left; padding-right；可以⽣效。但是竖直⽅向的margin-bottom; margin-top; padding-top; pa dding-bottom；却不能⽣效。
"注意:"虽然这⾥和标题⼀有点重复的感觉，但还是在这⾥具体列举出来，这样我们会更直观的了解不同点。
三: ⾏内元素有哪些? 块级元素有哪些? 空(void)元素有那些？
1.⾏内元素(11): a、b、span、img、input、strong、select、label、em、button、textarea 。
2.块级元素(9): div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。
3.空元素(6)：即系没有内容的HTML元素，例如: br、meta、hr、link、input、img 。
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给⼤家; 这个专题 就是 “前端HTML” 的相关专栏; 不积跬步，⽆以⾄千⾥, 戒焦戒躁 。
padding是外边距还是内边距如果对你有所帮助，喜欢的可以点个关注, 必然回访; ⽂章还⼀直持续打磨。
有什么想要了解的前端知识吗? 可以评论区留⾔, 会及时跟进分享所提内容。
整理知识点不易, 每次都是在⼯作繁忙之余夜深⼈静之时整理, ⽆论知识点是⼤是⼩, 都会验证后再分享, 以防⾃⼰发表的⽂章给⼤家造成误导。如有问题还望不吝赐教，本⼈会及时更改 (本⽂原创, 如需转载，请注明出处) 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。