Necesita tener el espaciamiento entre el final del div y comienzo del párrafo

Question

Tengo texto dentro de una etiqueta de párrafo que eso encaja cómodamente en el fondo de un div, que se verá en esta imagen: http://i44.tinypic.com/e05s0z.png

Yo podría poner un poco de relleno en la parte inferior de la div de solucionar este problema, pero puede haber varias Div, dependiendo de cuántos elementos hay en esa página.

Lo que tengo que hacer, es poner un poco de espacio entre el final de la última div (class = "artículo") y el texto dentro de la etiqueta de párrafo.

Este es el css para la clase de artículo

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

texto w / i la etiqueta de párrafo

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

¿Qué debo hacer?

Answer 1

Dar el párrafo final un id - #disclaimer, tal vez -. Continuación, estilo que tenga 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>

y ...

#disclaimer {
 padding-top: 10px;
}

[EDIT] Una alternativa a esto, en base a sus comentarios, sería rodear el artículo (s) en un div y darle esa div.class a / estilo de abajo margen de relleno.

Answer 2

Si usted tiene otros párrafos en su página web y no quiere darle un id o clase, a continuación, también se puede utilizar

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

Algunos navegadores antiguos no serán capaces de distinguir este selector, aunque

Answer 3

Se puede envolver su párrafo en un contenedor que tiene un acolchado en la parte superior, por lo que no importa lo que está por encima de ella.

Por ejemplo, envolverlo en un div con la siguiente css

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

Answer 4

Estas son las opciones por lo que yo veo:

1. Utilice la :last-child seudo CSS3 clase para apuntar el último div. Esta no es compatible con IE en absoluto, por lo depende de la importancia que el navegador es que si esto es una opción, pero por lo menos otros navegadores haría conseguir el efecto deseado.

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

2. Añadir una clase a la última div con el mismo estilo que el anterior. Esto no es ideal y puede o no puede ser posible dependiendo de cómo se generan los divs.

3. Añadir una clase a la etiqueta p con un valor padding-top.

4. Utilice .article + p selector para apuntar a una etiqueta p que es un hermano directa de .El artículo. Esto se apoya en IE7 (creo) pero no IE6.

Siempre le daría preferencia a # 1 o # 4, ya que reduce el desorden en el HTML, pero como ya he dicho otras palabras, podría ser un problema dependiendo de sus necesidades.

(gracias a Residuo para # 4)

Answer 5

También existe la primer hijo y último niño métodos css

Nota: Control de compatibilidad del navegador para aquellos que desea apoyar

Answer 6

Es la construcción de esta manera:?

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

Se utiliza el relleno:. 10px por lo que el div ha 10px dentro del margen

Si se trata de un CMS, estoy seguro de que el texto del párrafo podría ser envuelto dentro de otra etiqueta (DIV) o tal vez una clase para el (P). Si este no es el caso, se puede saber si hay una envoltura que rodea alrededor de todos los divs del artículo y la etiqueta p?

Si ese es el caso, entonces se puede llegar a la etiqueta P usando CSS, si no, no hay manera de lograr esto en todos los navegadores.

O ... me di cuenta de que podría hacer un truco aquí. pero usted tiene que asegurarse de que tiene un div seleccionable en la parte superior del artículo divs.

Debe ser algo como esto:

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

Así, todo div.article se moverá 5px, dejando 10px del margen real de Transcurrirá divs artículo. pero el último no tendrá la -5px moverse hacia arriba, por lo que va a terminar con 15px margen inferior de la etiqueta P.

Se puede jugar con los números para que sea el número más cómodo. Y en caso de que necesite un mayor control, a continuación, utilizar los valores de relleno que establezca para 10px en todos los sentidos y los colocó en consecuencia para compensar el margen compensado.

Answer 7

Podría simplemente añadir un par de <br/> etiquetas después de la última div?