Member Avatar for Dat0

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!

  • 2 Contributors
  • 2 Replies
  • 59 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Dat0

Dani AI

Generated

Good thread — thanks for the clear example, , and good point from . Changing a paragraph from a block box into an inline box switches it into the inline formatting context, and that changes how width, height and margins are applied. That difference (plus any user-agent defaults or browser quirks) is usually why an element suddenly seems to "overflow" its container. See the W3C inline formatting description and the MDN display reference for the formal behavior:

Practical fixes you can try:

  • If you can change the markup, use a true inline element for inline content.
  • If you cannot change the markup, display: inline-block keeps block-like sizing while letting the element flow inline. Also explicitly reset margins/padding (user-agent styles like paragraph margins can still affect layout) and check vertical-align. Inspect the computed styles in your browser devtools to spot floats, absolute positioning, or inherited margins that cause overflow.

Example CSS to try (apply to the element or a helper class):

.inline-fix {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

If this does not fix it, paste the minimal HTML/CSS or a small fiddle and I will point out the exact culprit.

Recommended Answers

All 2 Replies

Member Avatar for Airshow

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

Member Avatar for Dat0

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.