Search code examples
cssanchortext-indent

why does link inside indented p also indent


The paragraph below is indented with css: p + p {text-indent: 1.5em; margin-top: 0}. The a:hover tags inside this paragraph also indent showing extra space on the left side of the link, but I don't understand why that happens. Why would paragraph indent also apply to the links inside the paragraph?

The simple fix I found is just to add text-indent: 0; to a:hover. Is that the best fix?

<p>Due to the negative impacts to migratory and resident birds, the National Audubon Society has proposed a set of siting criteria for wind turbines (PDF Download: <a href="pdf/conservation/Responsible-Wind-Power-Wildlife.pdf"> Responsible Wind Power and Wildlife</a>). An <a href="#nas-ex">excerpt</a> from this publication is copied below. Wind energy information is also available on the Audubon website (<a href="https://www.audubon.org/news/wind-power-and-birds" target="_blank">Wind Power and Birds</a>).


Solution

  • The text-indent property is inherited when specified on a block element, which means it will affect inline-block descendant elements as well. When dealing with inline-block children, you may want to force them to text-indent: 0;
    https://css-tricks.com/almanac/properties/t/text-indent/

    Are you styling your <p> and <a> as block/inline-block elements? Make a stack snippet so that we can see your code in action.