Can anyone explain why if I apply style to a <p> to "display: inline" it overflows outside its containing block?

#iaminline{display:inline;}

<div>
<p id="iaminline">hola!</p>
</div>

The result has overflow, while "display:black" is completely contained in the containing block. I want to have inline elements completely inside the containing block. Thanks!

Recommended Answers

All 2 Replies

Dat0,

Block elements restyled as inline render unreliably. It's best not to do it.

Where possible use an inline elemt in the first place - notably <span>.

Unfortunately, if the (X)HTML/XML is not under your control then you are constrained.

Airshow

Thank you. Solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.