significa - ¿Cuál es el relleno y/o margen por defecto para un elemento ap(reset css)?
para que sirve padding en css3 (5)
CSS RESET Restablecerá el margen y el relleno de las etiquetas p a 0px, el margen común y el relleno dependerán de su diseño y tipo de contenido.
aún puedes usar 5px, como tu propio margen y relleno predeterminados
He estado usando un conjunto de estilos CSS de restablecimiento desde hace bastante tiempo y cada vez que tengo que crear un nuevo sitio web, el restablecimiento que más me molesta es el restablecimiento del margen y el relleno de una etiqueta ap. Entiendo por qué, pero me pregunto qué debe ser el margen y / o margen "predeterminado" en un elemento ap?
Supongo que esto no es coherente en todos los navegadores y, a menudo, se debe modificar para cada sitio, pero ¿hay un conjunto de valores de margen y / o relleno más comunes?
Versión corta: ¿Es (por ejemplo) margen de 5 píxeles y relleno en la parte superior e inferior ... o algo más?
El margen superior e inferior de la etiqueta P es 16px.
Eso es similar a dar margen de estilo: 16px 0px; a un párrafo.
La especificación CSS 2.1 tiene una hoja de estilo predeterminada para HTML 4. Es solo informativa y no normativa, por lo que los navegadores pueden usarla pero no tienen que hacerlo.
Otro recurso podría ser las herramientas de desarrollo web de los navegadores. La mayoría puede mostrarle la cascada de reglas que se aplicaron a un elemento en particular. Un ejemplo: Firefox y Safari (WebKit) parecen usar un margin: 1em 0px para los elementos p .
Para igualar las cosas a través de los navegadores, uso
p{
margin:0;
}
p + p{
margin-top:10px;
}
de esta manera no "freno" los contenedores en el espaciado superior / inferior original y sigo espaciando bien los párrafos si hay más de uno.
Simplemente no me gusta ver que p empuje contenedores parentales como este
.container {
border: 1px solid #ccc;
padding: 15px;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>
y ver esto como solución ideal
.container {
border: 1px solid #ccc;
padding: 15px;
}
p{
margin:0;
}
p + p{
margin-top:10px;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>
Yo siempre uso Firefox.
Por el complemento firebug encontré que el margen-superior / inferior predeterminado de la
la etiqueta se establece en 16 píxeles y el relleno se establece en 0, mientras que para el elemento del cuerpo el margen superior / inferior / derecha / izquierda se establece en 8 píxeles.