padding between floating items |
padding between floating items |
JohanS |
May 22 2020, 06:07 AM
Post
#1
|
Group: Members Posts: 5 Joined: 18-May 20 Member No.: 27,354 |
Hi All,
I am trying to adjust the size between images (floating items), but unfortunatly the padding doesnt work. I would like to adjust these images: Sorry for the bad drawing skills 1: i would like no space in between; 2: i would like no space in between; 3: is there a possibility to always make this size equal? The code: CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <html> <head> <title>Query Results (TST)</title> <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Karla:ital@1&family=Nanum+Gothic:wght@700&family=Raleway:wght@300;400&display=swap" rel="stylesheet"> <style> body{ text-align:center; background-color: #EEEEEE; font-family: 'Karla', sans-serif; } .container{ width:1040px; min-height: 200px; margin: 0px auto; overflow: hidden; background: white; } .container header{ width: 1040px; text-align: center; border-bottom: 1.4px solid #a9a9a9; font-size: 30px; color: #242424; float: left; } div.item2{ width: 300px; height: 230px; margin: 22px; float: left; background-color: red; display: inline-block; font-size: 14px; } img{ border-radius: 3%; } a{ text-decoration:none; color: inherit; } @media only screen and (max-width: 70em) { .container{ width: 98%; } div.item2{ width: 95%; } } </style> </head> <body> <section class="container"> <br> <br> <header> <p>2020 (11)</p> </header> </div> <div class='item2'> <a href='images_normal/456.jpg'><img src='images/456.jpg' width='300' height='169'></a><br> <b>Ninespine stickleback</b><br> <i>(Pungitius pungitius)</i><br> </div> <div class='item2'> <a href='images_normal/472.jpg'><img src='images/472.jpg' width='300' height='169'></a><br> <b>Roach</b><br> <i>(Rutilus rutilus)</i><br> </div> <div class='item2'> <a href='images_normal/596.jpg'><img src='images/596.jpg' width='300' height='169'></a><br> <b>Spined loach</b><br> <i>(Cobitis Taenia)</i><br> </div></section> </html> THank you! Johan |
pandy |
May 22 2020, 07:47 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't see any padding anywhere? Just as good. It's not padding you want. It's margin. You've added 22px margin all around and that's what you get.
CODE div.item2{ width: 300px; height: 230px; margin: 22px; ... I noticed a stray closing tags for DIV that should be removed. Here. CODE <header> <p>2020 (11)</p> </header> </div> Also, You shouldn't use BR to create space. You should use margin. The centering bit is harder. I can look at that later if no one else beats me to it. |
JohanS |
May 22 2020, 07:57 AM
Post
#3
|
Group: Members Posts: 5 Joined: 18-May 20 Member No.: 27,354 |
Hi All,
Unfortunately i`m not able to edit my own post (?) Anyway i solved the issue by removing all the margin settings, next thing is adding a new margin setting: margin-left: 3.5%; This worked for me! I still have a similar issue: 1: How to adjust this space in between? 2: How to adjust this space in between? I used margin-top, but then all images are adjusted, i would like to adjust only the first row (so ppl can see the line). The code: CODE !DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <html> <head> <title>Query Results (TST)</title> <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&family=Karla:ital@1&family=Nanum+Gothic:wght@700&family=Raleway:wght@300;400&display=swap" rel="stylesheet"> <style> body{ text-align:center; background-color: #EEEEEE; font-family: 'Karla', sans-serif; } .container{ width:1040px; min-height: 200px; margin: 0px auto; overflow: hidden; background: white; } .container header{ width: 1040px; text-align: center; margin-top: -20px; margin-bottom: 0px; border-bottom: 1.4px solid #a9a9a9; font-size: 30px; color: #242424; float: left; } div.item2{ width: 300px; height: 230px; margin-left: 3.5%; background-color: white; display: inline-block; font-size: 14px; float: left; } img{ border-radius: 3%; } a{ text-decoration:none; color: inherit; } @media only screen and (max-width: 70em) { .container{ width: 98%; } div.item2{ width: 95%; } } </style> <h1> Query results </h1> </head> <body> <section class="container"> <header> <p>2020 (11)</p> </header> <div class='item2'> <a href='images_normal/57.jpg'><img src='images/57.jpg'</a><br> <b>White-eye bream</b><br> <i>(Ballerus sapa)</i><br> </div> <div class='item2'> <a href='images_normal/63.jpg'><img src='images/63.jpg'</a><br> <b>White bream</b><br> <i>(Blicca bjoerkna)</i><br> </div> <div class='item2'> <a href='images_normal/90.jpg'><img src='images/90.jpg'</a><br> <b>Crucian carp</b><br> <i>(Carassius carassius)</i><br> </div> <div class='item2'> <a href='images_normal/91.jpg'><img src='images/91.jpg'</a><br> <b>Prussian carp</b><br> <i>(Carassius gibelio)</i><br> </div> <div class='item2'> <a href='images_normal/197.jpg'><img src='images/197.jpg'</a><br> <b>Three-spined stickleback</b><br> <i>(Gasterosteus aculeatus)</i><br> </div> <div class='item2'> <a href='images_normal/292.jpg'><img src='images/292.jpg'</a><br> <b>Belica</b><br> <i>(Leucaspius delineatus)</i><br> </div></section> </html> Thanks! Johan |
Lo-Fi Version | Time is now: 18th April 2024 - 07:24 AM |