CODEWITHSUNDEEP
htmlcss
Tonik
Tonik

Reputation: 163

Weird issue with padding and whitespace: nowrap in Chrome and IE

I ran into really weird issue. ( http://jsfiddle.net/Fq68D/ )

HTML

<div>
    <p>Hello World!</p>
</div>

CSS

div {
    display:inline-block;
}
p {
    background-color:#ccc;
    padding:10%;
    white-space:nowrap;
}

In Firefox it works like expected, text fits in p, and has padding,

While in Chrome and IE text gets out of box.

enter image description here

What causes this? Any workarounds?

Upvotes: 11

Views: 10988

Answers (2)

Deenath Geeganage
Deenath Geeganage

Reputation: 27

Use width:fit-content; fixed my issue

Upvotes: 1

WooCaSh
WooCaSh

Reputation: 5212

Add display: inline-block; to p element:

http://jsfiddle.net/Fq68D/1/

Upvotes: 13

Related Questions