Necessidade de ter espaçamento entre o final da div e início do parágrafo

Question

Eu tenho o texto dentro de uma tag de parágrafo que que se encaixa confortavelmente na parte inferior de uma div, que você vai ver nesta foto: http://i44.tinypic.com/e05s0z.png

Eu poderia colocar algum estofamento na parte inferior da div para corrigir isso, mas pode haver vários divs, dependendo de quantos itens estão na página.

O que eu preciso fazer, é colocar algum espaço entre o final do último div (class = "artigo") eo texto dentro da tag de parágrafo.

Aqui está o CSS para a classe article

.article {
  padding:10px;
  overflow:auto;
}

Text w / i a marca de parágrafo

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

O que devo fazer?

Answer 1

Dê o parágrafo final um id - #disclaimer, talvez - estilo então que ter padding-top

.

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

e ...

#disclaimer {
 padding-top: 10px;
}

[EDIT] Uma alternativa para isso, com base em seus comentários, seria para cercar o artigo (s) em uma div, e dar que div.class a / estilo inferior margem de preenchimento.

Answer 2

Se você tem outros parágrafos em seu site e não querem dar-lhe um id ou classe, então você também pode usar

.article + p {padding-top: 10px;}

Alguns navegadores antigos não será capaz de fazer este selector, embora

Answer 3

Você poderia envolver seu parágrafo em um recipiente que tem estofo no topo, de modo que não importa o que está acima dela.

Por exemplo, envolvê-la em uma div com o seguinte css

div.finaltext {
   clear: both;
   margin-top: 10px;
}

Answer 4

Aqui estão as suas opções, tanto quanto eu vejo isso:

1. Use o pseudo :last-child CSS3 classe para direcionar o último div. este não é suportado pelo IE em tudo, assim Depende de como importante que o navegador é que você se esta é uma opção, Mas pelo menos outros navegadores faria obter o efeito desejado.

   .article:last-child { padding-bottom: 20px; }

2. Adicione uma classe para a última div com o mesmo estilo como acima. Este não é ideal e pode ou não ser possível, dependendo de como os divs são gerados.

3. Adicione uma classe para a tag p com um valor padding-top.

4. Use selector .article + p para atingir um tag p que é um irmão direta de .Artigo. Isto é suportado no IE7 (eu acho), mas não IE6.

Eu sempre dar preferência a # 1 ou # 4, uma vez que reduz a desordem no HTML, mas como mencionei IE poderia ser um problema, dependendo de suas necessidades.

(graças a Residuum para # 4)

Answer 5

há também a primeira criança e métodos css última criança

Nota: verificação de navegador de compatibilidade para aqueles que você deseja suporte

Answer 6

É a construção da seguinte forma:?

<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>

Você pode usar padding: 10px assim que a div tem 10px margem dentro

.

Se é um CMS, tenho certeza de que o texto do parágrafo poderia ser acondicionada dentro de outra tag (DIV) ou talvez uma classe para o (P). Se este não for o caso, gostaria de perguntar se há um invólucro envolvente em torno de todos os divs do artigo e a etiqueta p?

Se for esse o caso, então você pode chegar à marca P usando CSS, se não, não há nenhuma maneira que você conseguir isso em cada navegador.

ou ... eu percebi que poderia fazer um truque aqui. mas você tem que ter certeza de ter um div selecionável no topo das divs do artigo.

Deve ser algo como isto:

.article { margin-top: -5px; margin-bottom: 15px; }

Assim, cada div.article moverá 5px, deixando 10px de margem verdadeira betwen artigo divs. mas o último não terá o -5px mover para cima, de modo que você vai acabar com 15px margem inferior para a marca P.

Você pode jogar com os números para torná-lo o número mais confortável. E no caso de você precisar de mais controle, em seguida, usar os valores de preenchimento que você definiu para 10px em todos os sentidos e colocá-las em conformidade para compensar a margem de deslocamento.

Answer 7

Você poderia simplesmente adicionar um par de marcas <br/> após a última div?