When padding-right added to the first p tag, an extra padding-right appears on the second p tag. What is the problem?

HTML

 <div id="hdr_login"> <p>ALREADY USER? <span style="color:#b85474;">LOGIN</span></p> <p>SIGN UP</p> </div>

CSS

 #hdr_login { float: right; } #hdr_login p { outline:1px solid black; color:#3a5878; margin:0; } #hdr_login p:first-child { padding-right: 18px; } #hdr_login p:last-child { background: #ca748f; padding:14px 54px; margin-top:15px; }

http://jsfiddle.net/jyLmX/

    1 answer 1

    You don’t have padding added but a width, <p> sticks to the left side of the <div> and expands to the end. Put the padding-left instead of the padding-right and see everything, so that it is not necessary, for example, to specify the width explicitly. Or so:

    HTML

     <div id="hdr_login"> <p>ALREADY USER? <span style="color:#b85474;">LOGIN</span></p> <p>SIGN UP</p> </div>

    CSS

     #hdr_login { float: right; position: relative; } #hdr_login p { outline:1px solid black; color:#3a5878; margin:0; } #hdr_login p:first-child { padding-left: 18px; } #hdr_login p:last-child { position: absolute; right: 0; background: #ca748f; padding:14px 54px; margin-top:15px; }

    http://jsfiddle.net/oceog/jyLmX/1/

    • Thank you, I understand everything! - Sizel