Como consigo colocar o elemento p colado à parte inferior?

codercss · Junho 24, 2016

Olá pessoal,

Tenho este código:

<body>
   <section>
      <h1>The main signboard</h1>
      <hr>
      <p>footer signboard</p>
   </section>
....

section {
   border: 1px solid #000;
   height: 100px;
   margin: 20px auto;
   width: 400px;
}

h1 {
   background-color: #990000;
   color: #FFF;
   font-size: 1.2em;
   left: -10px;
   padding: 5px 0;
   position: relative;
   text-align: center;
   width: 420px;
}

p {
   background-color: #990000;
   color: #FFF;
   font-size: 1.2em;
   padding: 2px 0;
   position: relative;
   text-align: center;
   margin: 0 auto;
   bottom: 0px;
}

hr {
   padding-bottom: 8px;
   margin: 0 auto;
   border: 0;
}

O resultado é este: http://i.imgur.com/BoQf5JS.png
Para que o elemento p, paragrafo, fique totalmente encostado abaixo, dentro do elemento section, tive que adicionar um elemento hr e mexer no seu padding, margin e border. Essa é a maneira correcta de fazer isso? O que sugerem?

Obrigado

L. Henrique · Junho 24, 2016

Codercss,

Se a section possui width e height fixos, então é mais prático você usar margin-top. Não existe problema algum em utilizar essa propriedade pra ajuste.

Veja como deixei aqui no JSFiddle.

HTML:

<section>
   <h1>The main signboard</h1>
   <p>footer signboard</p>
</section>

CSS:

section {
   border: 1px solid #000;
   height: 100px;
   margin: 20px auto;
   width: 400px;
}

h1, p { background: #990000; color: #FFF; font-size: 1.2em; text-align: center; }

h1 {
   position: relative;
   left: -10px;
   padding: 5px 0;
   width: 420px;
}

p {
   padding: 2px 0;
   margin-top: 26px;
}

Abraços!