行内元素与块元素1


块元素在页面内展示的效果是占满一行,行内元素则是其本身一小块。

  • 但是可以通过代码来改变元素属性:
    例:
    1. a { display:block; }
      “a”展示为块元素。

    2. div { display:inline; }
      “div”展示为行内元素。

    3. a { display:inline-block; }
      “a”包含两种元素的某些特性,但在ie8以下无法使用。
      inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。
      ————————————————————————————————————

      注:


      1. 行内元素的宽高设置无效,其宽高是由自身决定的。
      2. 行内元素的左右padding和margin是有效的,但是上下不占据空间。

  • 你可能感兴趣的:(行内元素与块元素1)