Altura texto en párrafos en columnas css
Tengo un diseño de dos columnas.
La columna izquierda comienza con una imagen. La derecha con un párrafo. El tema es que no sé cómo hacer que, si quiero que la columna izquierda no tenga espacio entre el margen superior de la columna y la imagen, (o sea, la imagen comienza en 0.0 de la columna izquierda), quiero que el texto en el párrafo de la columna segunda empiece también sin margen con respecto al margen superior de la columna derecha
Intenté con p:first-child
. Left-column enterprises-text:first-child p {
margin-top. 0px;
}
Pero no sale
MI problema está en
<div class="left-column enterprises-text"> <p>Su empresa puede formar parte de este proyecto publicitando en nuestro sitio, en este espacio (con banners de ubicación rotativa) o en cualquier otro lugar de nuestra web. Los chicos que apadrinamos cubren una parte esencial de sus muchas carencias gracias al aporte solidario de los suscriptores a nuestro boletín Manos a la Obra y a la voluntad de las empresas que apoyan a Manos por Hermanos.</p>
El resto de la página está en proceso así que no importa cómo se ve por ahora
3 Respuestas
Antes que nada, ¿tienes la url de la página a la que te refieres, para poder verlo mejor?
Por lo que dices, el margen te lo está poniendo el elemento "p", ya que los navegadores suelen ponerle un margen superior e inferior a este elemento
En el código que indicas, la sintaxis CSS no es correcta, ya que después de la propiedad pone un punto y son dos puntos, de manera que quede así:
. Left-column enterprises-text:first-child p {
margin-top: 0px;
}Por otra parte, el uso del pseudo-elemento "first-child" tampoco sería el correcto, ya que quieres que te lo aplique al primer elemento "p" dentro de la clase "enterprises-text" y de esta manera lo que estás poniendo es que te lo aplique a todos los elementos "p" dentro del primer elemento con clase "enterprises-text" (y que esté dentro de la clase "left-column"). En este caso no afectaría porque te lo haría igual, pero para que lo tengas en cuenta. El código correcto sería pues este (fíjate también que te puedes ahorrar el "px" cuando pones un 0 en un "margin"):
.left-column enterprises-text p:first-child {
margin-top: 0;
}
Tu regla css está mal, por eso no aplicará el estilo.
Sería .enterprises-text:first-child p { en todo caso, ya que te falta un punto antes de enterprises, ademas si pones dos clases estas diciendo al navegador que la segunda es contenida por la primera. Tu le estas diciendo:
El primer hijo p (que ya sería el primer hijo, no es necesario especificar p ya que si no te busca la p dentro del hijo) contenido en enterprises-text, contenido a su vez en left-column.
Lo que necesitas es más simple que tu sentencia, si solo necesitas quitarle al párrafo su margen (o padding) superior creo que te serviría
.enterprises-text p {
margin-top: 0;
padding-top:0;
}
Suerte!
Si pudieras subir tu problema en http://codepen.io/pen/ sería genial, sin embargo voy ha responderte a ver si entendi un poco, puedes manejar porcentajes en el padding, sin embargo, mi consejo es utiliza un framework como por ejemplo http://getbootstrap.com/ que es uno framework muy popular y con ayuda de http://www.layoutit.com/es/#.VF6LC_mG-So puedes generar un bueno diseño sin problemas, en espera de tu respuesta.