Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Odstęp miedzy obiektami
Forum PHP.pl > Forum > Przedszkole
david8213
26.03.2019, 08:29:53
Jak się pozbyć odstępu między górną a dolnymi 'tabelami' DIVami ?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6. <title>...</title>
  7. </head>
  8.  
  9. <style>
  10.  
  11.  
  12.  
  13. #container
  14. {
  15.   width: 1200px;
  16.   display: block;
  17.   margin:0 auto;
  18. }
  19.  
  20. #glowna:after {
  21.   content:'';
  22.   display:block;
  23.   clear:both;
  24.  
  25. }
  26.  
  27. #top1 {
  28.   width:1150px;
  29.   height: 100px;
  30.   background-color:lightblue;
  31.   margin-left: 0px;
  32. //  padding:2px;
  33.   margin-top: 10px;
  34. }
  35.  
  36.  
  37. #table1 {
  38.   float:left;
  39.   width:5%;
  40.   height: 500px;
  41.   background-color:lightblue;
  42.   margin-left: 0px;
  43. //  padding:2px;
  44.   margin-top: 25px;
  45. }
  46.  
  47. #table2 {
  48.   float:left;
  49.   width:20%;
  50.   height: 500px;
  51.   background-color:lightgreen;
  52.   margin-left: 0px;
  53. //  padding:2px;
  54.   margin-top: 25px;
  55. }
  56.  
  57. #table3 {
  58.   float:left;
  59.   width:550px;
  60.   height: 500px;
  61.   background-color:gold;
  62.   margin-left: 0px;
  63. //  padding:2px;
  64.   margin-top: 25px;
  65. }
  66.  
  67. #table4 {
  68.   float:left;
  69.   width:20%;
  70.   height: 500px;
  71.   background-color:lightgreen;
  72.   margin-left: 0px;
  73. //  padding:2px;
  74.   margin-top: 25px;
  75. }
  76.  
  77. #table5 {
  78.   float:left;
  79.   width:5%;
  80.   height: 500px;
  81.   background-color:lightblue;
  82.   margin-left: 0px;
  83. //  padding:2px;
  84.   margin-top: 25px;
  85.  
  86. }
  87.  
  88.  
  89. </style>
  90.  
  91.  
  92. <body>
  93.  
  94.  
  95.  
  96. <div id="container">
  97.  
  98.  
  99. <div id="top1">górny - div</div>
  100.  
  101.  
  102.     <div id="glowna">
  103.       <div id="table1">pierwszy - div</div>
  104.       <div id="table2">drugi - div</div>
  105.       <div id="table3">trzeci - div</div>
  106.       <div id="table4">czwarty - div</div>
  107.       <div id="table5">piąty - div</div>
  108.     </div>
  109.  
  110. </div> <!--container end--->
  111.  
  112. </body>
  113.  
  114. </html> 
[HTML] pobierz, plaintext


margin-bottom: 0px; w #top1 nie pomaga
Evinek
26.03.2019, 09:22:45
Prawy przycisk myszy na danym elemencie w przeglądarce, klikasz zbadaj element.
Sprawdzasz CSS, podświetla który element odpowiada za jaki fragment strony. Pobaw się tym.

W table1, table2, ..., table5 masz margin-top: 25px; co jest winowajcą.
https://jsfiddle.net/0wLomgaf/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.