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>).
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.