CODEWITHSUNDEEP
htmlcss
Wang Xiao
Wang Xiao

Reputation: 315

display: inline | inline-block and float: left | right while using it have any special meaning?

I see a lot of websites are used like this property, but then float, element is the display: block, and give it to reset the display: inline looks like ah, the element or elements to support all the features block does not take effect.

For example: width, height, padding | margin-top | bottom and so on ....

Does not support inline element properties, such as: vertical-align: middle;

http://jsfiddle.net/gw7ctyth/

 .test {
        float: left;
        display: inline;
        width: 100px;
    }

For example stackoverflow's css: http://cdn.sstatic.net/stackoverflow/all.css?v=ab969cd6082f

#hlogo {
    float: left;
    display: inline-block
}

For example zhihu's css: http://static.zhihu.com/static/ver/012ee17a8ea33a674d13f13fa97cffb4.z.css

.zg-g1,.zg-g2,.zg-g3,.zg-g4,.zg-g5,.zg-g6,.zg-g7,.zg-g8,.zg-g9,.zg-g10,.zg-g11,.zg-g12,.zg-g13,.zg-g14,.zg-g15,.zg-g16 {
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px
}

Upvotes: 0

Views: 434

Answers (1)

BoltClock
BoltClock

Reputation: 723498

Your assertion that floats are always block boxes is correct. Changing the element to inline or inline-block will have no effect for as long as it is floating.

As to why some websites use both properties together... other than (most likely) a fundamental misunderstanding of floats, the only other scenario I can think of is that display: inline actually serves as a workaround for a bug that affects IE6, but this workaround was relevant a decade ago and should no longer be relevant today, except in legacy sites.

Upvotes: 2

Related Questions