0

При добавлении padding-right к первому тегу p, появляется лишний padding-right у второго тега p. В чем проблема?

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 ответ 1

3

У вас не padding добавляется а ширина, <p> прилипает к левой стороне <div> и расширяется до конца. Поставьте padding-left вместо padding-right и всё увидите, чтобы этого не было надо например ширину явно указать. Или так:

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/

1
  • Спасибо, все понял!
    – Sizel
    1 июл 2014 в 12:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.