Problema con etiqueta p

[R762]

Hola que tal tengo un gran problema estoy desarrollando un sitio intento alinear un párrafo con respecto a una imagen, vamos a decir al centro. bueno la imagen se encuentra al como background de un div y los párrafos están dentro de ese div lo que quisiera saber es por que los párrafos al ponerles el margin alinean al div que los contiene esto solo para el primer párrafo por que he agregado otros y estos si se mueven con respecto a su div contenedor y no mueven al div que los contiene. voy a poner el código. para aclarar mas esto

<div id="fecha">
<p class="mes">1</p>
<p class="mes">2</p>
<p class="mes">3</p>
</div> // este es el codigo de html

#fecha{
width:243px;
height:197px;
background:url(img/calendario.png) no-repeat;
}

#fecha .mes{
margin:0;
padding:0;
margin-top:10px;
} //estos dos son el codigo css

entonces alcarando bien la clase mes que se deveria de mover con respecto de el div fecha lo hace pero solo despues del segundo parrafo ya que el primero no se mueve con repecto de su div moviendolo de su posicion

[gdls]

Amigo pon mas de tu codigo, porque lo visto en tu mensaje dice estar bien...

Saludos,,

[soratofx]

por las medidas del div #fecha supongo que es una imagen de un calendario (con los cuadros) y lo que tu quieres hacer es colocar los numeros en los cuadros correspondientes al mes, en otras palabras en el primer cuadro (enero) ponerle el numero 1, en el segundo cuadro (febrero) ponerle el numero 2 y así sucesivamente no? leyendo tu codigo tus parrafos unicamente tienen un margen superior de 10px en otras palabras, tus parrafos unicamente se iran hacia abajo uno de otro, a menos de que tu calendario tenga 12 cuadros hacia abajo estaria bien, lo que puedes hacer es modificar tus parrafos para que dejen de mostrarse como elementos en linea (el tag <p> se muestra en linea) y mostrarlos en bloque:

por cierto... tienes un error de código no puedes ponerle a una clase DOS VECES la misma propiedad!

Código CSS:

#fecha .mes{
  margin:0; /* le dices que los margenes sean de CERO */
  padding:0;
  margin-top:10px; /* y despues les dices que ponga un margen de 10px arriba */
} //estos dos son el codigo css
 

el margin y padding igual a cero es un reseter general que debe usarse:

Código CSS:

* {
  margin:0;
  padding:0;
}
 

para que todos los elementos de la pagina tengan un margen y relleno igual a cero, aunque te recomiendo mas usar el reset de erick meyer (puedes buscarlo en google, porque no sé si consideran spam poner links a otras paginas)

de todos modos te lo dejo:

Código CSS:

/* Eric Meyer CSS Reset */
 
*{ margin:0; padding: 0; border: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, trike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
 

lo que puedes hacer (dependiendo que quieres hacer):

Código CSS:

#fecha {
  width:243px;
  height:197px;
  background:url(img/calendario.png) no-repeat;
}
 
#fecha p {
  display:block; /* mostramos en bloque el elemento */
  height:15px; /* forzamos un alto fijo */
  margin:10px; /* margen 10px en todos lados */
  width:15px; /* forzamos un largo fijo */
}
 

seria mas facil que compartieras esa imagen de background del div #fecha para tener una idea mas clara de que es lo que quieres hacer :)