Ayuda con padding o margin por favor.
Hola quiero reducir el margen blanco entre el texto y su propia caja. Con padding 0 y margin 0 no entiendo porque sigue manteniendo un margen.
¿Podéis ayudarme?, ¡ya no se que hacer!
Os dejo el código que he hecho yo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
body{padding:0px; margin:0px;}
.derecha {
text-align: left;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="800">
<tr>
<td width="121"height="191" bgcolor="#999">
</td>
<td bgcolor="#ffffff"><blockquote>
<p class="derecha">Rationse rsperem quasit ut alicimus, cus sita quuntib erepudae nullores simos ut offici repere, omnis essitiis aut aligent eumquodit, occatia santiore, autas eost, sim rem. Et qui doluptatem etur modi ad quid expliae cuptatio te plis dunt volla etur aut harum fugiam id quisciis autam ilit, qui vel molesequo tes aut qui conserum aci corum veria sin commost, aut latest untus eos sum estio est, ut archit inulparcia enda dolo dipit autaquunt vernatio quis as dolestet lit inullab oreces cone con cone mil moluptatia solores endisitio. Gendi consendi dolecte ssequi ipidebi strum, sim quatem et aut laut quiat.</p>
</blockquote></td>
<td width="117"height="191" bgcolor="#999"></td>
</tr>
</table>
</body>
</html>
Juanmanuelalcon.com
Hola compañero!
En principio te recomendaría que no utilizaras tablas para estructuras tan sencillas aunque son perfectamente válidas, ese no es el problema.
He visto un par de detalles que puedes revisar:
- Lo primero, no estaría mal que a la tabla le establecieras el cellpadding y el cellspacing a 0.
- Lo segundo ¿necesitas blockquote?, prueba a eliminarlo del código y verás como tu párrafo ocupa el ancho de la celda, si quieres utilizarlo, dale estilos a blockquote.
- Tercero, es buena práctica resetear los estilos al principio de tu hoja de estilos, esto se hace para igualar anchos, paddings, margins, etc. en todos los navegadores, te paso un enlace al más utilizado: , este código lo colocas tal cual al comienzo de tu css.
Te pego tu código corregido:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
body{padding:0px; margin:0px;}
.derecha { text-align: left; padding:0px; margin:0px; }
</style>
</head>
<body>
<table width="800" cellpadding="0" cellspacing="0">
<tr>
<td width="121"height="191" bgcolor="#999">&nbsp;</td>
<td bgcolor="#ffffff" valign="top">
<p class="derecha">Rationse rsperem quasit ut alicimus, cus sita quuntib erepudae nullores simos ut offici repere, omnis essitiis aut aligent eumquodit, occatia santiore, autas eost, sim rem. Et qui doluptatem etur modi ad quid expliae cuptatio te plis dunt volla etur aut harum fugiam id quisciis autam ilit, qui vel molesequo tes aut qui conserum aci corum veria sin commost, aut latest untus eos sum estio est, ut archit inulparcia enda dolo dipit autaquunt vernatio quis as dolestet lit inullab oreces cone con cone mil moluptatia solores endisitio. Gendi consendi dolecte ssequi ipidebi strum, sim quatem et aut laut quiat.</p>
</td>
<td width="117"height="191" bgcolor="#999">&nbsp;</td>
</tr>
</table>
</body>
</html>
Un abrazo!
tandemtandem
¡¡¡Gracias Juan Manuel!!!, ahora mismo me meto en tu web y me hago seguidor tuyo en facebook, twitter, te hago la compra y te saco el perro a pasear.
¡Muchísimas gracias por el favor! :-)
Juanmanuelalcon.com
a mandar maquina!
por cierto, no te he pasado el enlace al reset de css, aquí lo tienes:
Eric´s Meyer Resets:
http://meyerweb.com/eric/tools/css/reset/
Vmv
@charset "utf-8";
/* CSS Document */
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, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
Ese es el reset de mi página, espero que te sirva ;)