Padding or Margin Only Affects First Line of Text – CSS
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.
12 Comments on “Padding or Margin Only Affects First Line of Text – CSS”
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!
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.
Never worry about missing important WordPress updates again by subscribing to our newsletter.
Do you like what you see?
We bring ideas to life in the form of clean, elegant websites. We would love to hear from you about your next project. Contact us now for a free consultation.
12 Comments on “Padding or Margin Only Affects First Line of Text – CSS”
Thanks!
Thank you, it really helped!
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!
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.
I don’t think an issue in Excel is going to be at all related!
Worked like a charm! Quick and easy solution. Thank you!
Glad it worked for you 🙂
Worked immediately; first time.
Thanks.
Thanks Brian — this worked great.
This worked for me as well. Thank you
Thanks! This worked.
This worked wonderfully. Thank you!