Tema: Aumenta margen con tamaño letra.
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 25/11/2011, 19:10
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Aumenta margen con tamaño letra.
No me preguntes por que, ya que necesito hacer varias pruebas para determinarlo, ejecutá este código, revisalo y fijate cual es la diferencia

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>titulo</title> 
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. /* arriba */
  10. div.main{
  11. min-height: 100px;  
  12. margin-top: 10px;
  13. margin-bottom: 10px;
  14. border-radius: 5px;
  15. box-shadow: 0 0 8px 1px #000000;
  16. border: solid transparent 1px;
  17. }
  18.  
  19. div.margin {
  20. border: solid red 1px;
  21. margin-top: 30px;
  22. height: 200px;
  23. }
  24. /* medio */
  25.  
  26. #main {
  27. min-height: 100px;
  28. margin-top: 10px;
  29. margin-bottom: 10px;
  30. border-radius: 5px;
  31. box-shadow: 0 0 8px 1px #000000;
  32. }
  33. div#margin {
  34. border: solid 1px #000;
  35. background: red;
  36. margin-top: 30px;
  37. height: 200px;
  38. }
  39.  
  40. /* abajo */
  41. .principal {
  42. min-height: 100px;
  43. margin-top: 10px;
  44. margin-bottom: 10px;
  45. border: solid red 1px;
  46. border-radius: 5px;
  47. box-shadow: 0 0 8px 1px #000000;
  48. }
  49.  
  50. .contenedor{
  51. border: solid 1px #000;
  52. margin-top: 50px;
  53. height: 200px;
  54. }
  55.  
  56. /* separador */
  57. p{
  58. height: 50px;
  59. line-height: 50px;
  60. padding: 0;
  61. background-color: maroon;
  62. color: #FFF;
  63. vertical-align: middle;
  64. text-align: center;
  65. }
  66.  
  67. /*]]>*/
  68. </style>
  69. </head>
  70. <body>
  71.     
  72. <div class="main">
  73. <div class="margin">Emprear</div>
  74. </div>
  75.  
  76. <p>Separador</p>
  77. <div id="main">
  78. <div id="margin">mariomon17</div>
  79. </div>
  80. <p>Separador</p>
  81.  
  82. <div class="principal">
  83. <div class="contenedor">Titulo</div>
  84. </div>
  85.  
  86. </body>
  87. </html>

concentrate porque es muy sutil el detalle, ya lo probé en tu web y funciona (todas las pruebas fueron con Firefox 8)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.