常见的块级元素与行内(内联)元素有哪些?它们有什么区别?

简介: 常见的块级元素与行内(内联)元素有哪些?它们有什么区别?

我需要一个答案,或许美满,或许破碎,但我不想半途而废。

 

1.默认情况

哪些HTML标签是块级元素、哪些是内联元素?

 

块级元素(display:block/table;):div、h1-h6、p、table、ul、ol、dl、li、dl、dt、dd……

行内元素(display:inline/inline-block;):span、a、

img、input、button……

 

2.块级元素和行内(内联)元素的区别

块级元素

 

  • 独占一行
  • 可以设置宽高,width默认为100%(父级元素宽度),height默认为0
  • 可以容纳内联元素和块级元素

行内元素

  • 一行可放置多个
  • 不能设置宽高,宽高由内容撑开
  • 水平方向的 padding 和 margin 属性可以使用(内边距的 top/bottom和外边距的top/bottom都不能设置)
  • 只能容纳文本和内联元素

行内替换(置换)元素(也被称作行内块元素)

  • 一行可放置多个
  • 可以设置宽高,默认宽高由内容撑开
  • 常见的行内替换元素:img、input

 

 

 

目录
打赏
0
0
0
0
10
分享
相关文章
伪类选择器与伪元素选择器的区别
【10月更文挑战第23天】通过以上对伪类选择器和伪元素选择器的详细比较和分析,我们可以更清晰地理解它们之间的差异和各自的特点。在实际的网页设计和开发中,正确地选择和使用伪类选择器与伪元素选择器,能够为我们的页面带来更出色的视觉效果和更好的用户体验。同时,要不断关注浏览器的发展和更新,以确保我们的代码在各种环境下都能正常运行。
91 8
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
338 0
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
360 0
伪元素和伪类的区别和作用?
伪元素和伪类的区别和作用?
104 0
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
189 1
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
227 0
前端总结:块级元素和行内元素及其区别
前端总结:块级元素和行内元素及其区别
213 0
前端总结:块级元素和行内元素及其区别
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等