Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Odstęp miedzy obiektami
david8213
post 26.03.2019, 08:29:53
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

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

Ten post edytował david8213 26.03.2019, 09:08:06
Go to the top of the page
+Quote Post
Evinek
post 26.03.2019, 09:22:45
Post #2





Grupa: Zarejestrowani
Postów: 280
Pomógł: 46
Dołączył: 23.03.2010

Ostrzeżenie: (0%)
-----

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/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 22:53
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn