搜尋

首頁  >  問答  >  主體

css - 浮动对span高度的影响

给span加上浮动(float:left),再给他加上行高(line-height:30px;),那么此时span的高度为30px。那么去除其浮动,它的高度就不为30px。为什么呢?暂时没想明白。

span{float:left; line-height:30px;}
伊谢尔伦伊谢尔伦2860 天前1082

全部回覆(7)我來回復

  • PHP中文网

    PHP中文网2017-04-17 13:06:11

    首先span是行內元素,其次span是非替換元素,所以不能設定寬高。你float之後,讓span成塊級元素,所以可以設定寬高。像img,input,textarea,select這些雖然是行內,但是是替換元素,如果是沒有設定寬高,那麼就是預設寬高,寬高是可以設定的。

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:11

    float會元素block化,也就是說浮動的元素的displayblock

    回覆
    0
  • 阿神

    阿神2017-04-17 13:06:11

    Span預設是行內元素

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 13:06:11

    感覺你描述的不清楚。
    在有line-height:30px;屬性的情況下,無論是否浮動,行高總是30px。
    如果是height:30px;在沒有float屬性的情況下高度屬性不管用,行內元素不能設定行高。而加上float,該元素會變成塊級元素,高度也就管用了。

    回覆
    0
  • 大家讲道理

    大家讲道理2017-04-17 13:06:11

    inline元素無邊界,例如兩個span會混成一行,使用由外而內的取高為內容高;可以理解為inlie元素沒有邊界,收縮到內容邊界;如果加上float,非明示指定規則會預設繼承inline-block;由於flaot的取塊方法,使用的是由內而外的決定邊界後取高;

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:11

    很簡單,span是行內元素,對這種元素是不能設定寬高的。但是有2種方式能間接改變它的display:float和position。

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 13:06:11

    光看你這一段CSS不能判斷問題 出在哪裡,
    你寫加上 line-height: 30px !important; 試試

    回覆
    0
  • 取消回覆