html - div - Eliminar el margen del cuerpo en CSS
html title attribute style (10)
Simplemente elimine el
Marginy elPaddingpredeterminados del navegador. Aplique la parte superior de su CSS.
<style>
* {
margin: 0;
padding: 0;
}
</style>
NOTA:
-
Intente restablecer todos los
html elementsantes de escribir su CSS.
O
[
Use This In Your Case
]
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style>
MANIFESTACIÓN:
<style>
*{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
</style>
<html>
<head>
</head>
<body>
<h1>logo</h1>
</body>
</html>
Soy nuevo en el desarrollo web y encontré un problema al eliminar el margen del cuerpo.
Hay espacio entre la parte superior del navegador y el texto del "logotipo". Y mi código está aquí en jsbin .
¿El
body { margin: 0;}
incorrecto si quisiera eliminar el espacio?
Algunos elementos HTML tienen márgenes predefinidos (a saber,
body
,
h1
a
h6
,
p
, conjunto de
fieldset
,
form
,
ul
,
ol
,
dl
,
dir
,
menu
,
blockquote
y
dd
).
En su caso, es el
h1
causa su problema.
Tiene
{ margin: .67em }
por defecto.
Si lo establece en 0, eliminará el espacio.
Para resolver problemas como estos en general, recomiendo usar las herramientas de desarrollo de su navegador. Para la mayoría de los navegadores: haga clic con el botón derecho en el elemento sobre el que desea obtener más información y seleccione "Inspeccionar elemento". En la pestaña "Estilos", en la parte inferior, tiene un modelo de cuadro CSS. Esta es una gran herramienta para visualizar bordes, relleno y márgenes y qué elementos son la raíz de sus dolores de cabeza de estilo.
El problema es con el margen del encabezado
h1
.
Necesitas probar esto:
h1 {
margin-top:0;
}
Encontré que este problema continuaba incluso al configurar BODY MARGIN a cero.
Sin embargo, resulta que hay una solución fácil. Todo lo que necesita hacer es darle a su etiqueta HEADER un borde de 1px, además de establecer el MARGEN CORPORAL en cero, como se muestra a continuación.
body { margin:0px; }
header { border:1px black solid; }
También es posible que necesite cambiar el MARGEN a cero para cualquier elemento H1, H2, etc. que tenga dentro de su div HEADER. Esto eliminará cualquier espacio adicional que pueda aparecer alrededor del texto.
No estoy seguro de por qué funciona, pero uso el navegador Chrome. Obviamente, también puede cambiar el color del borde para que coincida con el color del encabezado.
Esto debería ayudarlo a deshacerse de los márgenes corporales y el margen superior predeterminado de la etiqueta
<h1>
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
La respuesta correcta para esta pregunta es "css reset".
* {
margin: 0;
padding: 0;
}
Elimina todo el margen y el relleno predeterminados para cada objeto en la página, sin restricciones, independientemente del navegador.
Puede usar body o * para hacer margen y relleno 0px;
*{
margin: 0px;
padding:0px;
}
Te recomendaría restablecer todos los elementos HTML antes de escribir tu CSS con:
* {
margin: 0;
padding: 0;
}
Después de eso, puede escribir su CSS personalizado, sin ningún problema.
Todavía tienes un margen en tu etiqueta
h1
Entonces debes eliminar eso así:
h1 {
margin-top:0;
}
Yo diría que usando:
* {
margin: 0;
padding: 0;
}
Es una mala manera de resolver esto.
La razón por la que el margen h1 sale del padre es que el padre no tiene un relleno.
Si agrega un relleno al elemento padre de la h1, el margen estará dentro del padre.
Restablecer todos los rellenos y márgenes a 0 puede causar muchos efectos secundarios. Entonces es mejor eliminar el margen superior de este título específico.