Padding or Margin Only Affects First Line of Text – CSS

Screenshot of a margin only affecting the first line of a paragraph element.

Looks like an indent, but isn’t!

A common problem when formatting your website with CSS is that the first line of text in a paragraph, header, or link is affected by margin or padding while the remaining lines are not. It may even appear as though the first line is indented in some cases while none of the others are.

Solution for padding or margin only adjusting first line.

The vast majority of the time, this problem is caused by “display: inline;” being placed on an element, usually one of the paragraph, link, or header tags. The behavior is a little strange, but for some reason this prevents the lines after the first from being formatted properly. To fix the problem, simply change the element to “display: block;” and your problems should go away!

Let me know if you’ve been having this problem and if this helped you! Tweet me @brianjonline if you want any more help or have any questions.

About Brian Johnson

Brian Johnson is a website developer and designer living in Minneapolis, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

12 Comments on “Padding or Margin Only Affects First Line of Text – CSS”

  1. Tags that are block by default, including div, should never be made as inline, at most inline.-block.
    Similarly, tags that are inline by default, including span, should never be made block, at most inline-block.
    Attempting to do so will likely trigger anomalous behaviour.

    Also, avoid putting tags that are normally blocks inside those that are normally inline, as anomalous behaviour may also result.

    There are behaviour biases built into the different display types that trying to display against type may not fully bypass. After all, if any tag could use any display type, we wouldn’t need both div and span!

  2. hi – i have the same problem on excel. When i wrap text and use conditional formatting to indent the cell, it only indents the first line and then the second line does not indent:

    Test cell – wrap text
    causing only first line to indent.

Leave a Reply

Your email address will not be published. Required fields are marked *