块级元素、行内元素

  1. 块级元素、行内元素的区别
  • 块级元素占用空间是一整行，行内元素占用空间是它自身的内容宽度。
  • 行内元素可以并排显示，块级元素不能。

  • 块级元素可设置宽、高、margin、padding；对行内元素设置宽高无效，左右margin和padding有效，上下margin和padding不占据空间。


  1. 块级元素、行内元素常用标签

  • 常用块级元素：
    div，p，h1···h6，table，tr，ul，ol，li、dl，dt、form

  • 常用行内元素：
    a，span，img，input，button，em，textarea

  1. 块级元素、行内元素之间相互转换
    可用display实现元素类型的转换
  • display: block
    可将行内元素转换成块级元素，使其拥有块级元素的特性
  • display: inline
    可将块级元素转换成行内元素，使其拥有行内元素的特性

  • display: inline-block
    可将元素转换成内联块元素，同时拥有块级元素和行内元素的特性（可并排显示，同时可设宽高、margin和padding）


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容