Geek Answers Handbook

How to get the distance between units

body{background-image: url(images/boy_naruto_blond_drop_stern_look_24237_1366x768.jpg);background-attachment: fixed; } @font-face{ font-family:pagal; src:url("fonts/Pagal Font.ttf");} @font-face{ font-family:folktale; src:url("fonts/Folktale.ttf"); } #titl{ font-family:folktale; text-align:center; color: aliceblue; font-stretch: ultra-expanded; font-size: 40px; background: rgba(44,95,188,0.3); back } h1{color: rgb(255,201,14);margin-bottom: 0px;padding-bottom: 0px;border: 0px;} sub{margin-top: 0px;padding-top: 0px;border-spacing: 0px;} .icon{height: 150px;width: 200px;text-align: center;} #naruto{display: table-cell;padding: 20px;background: rgba(220,199,48,0.5);} #sasuke{display: table-cell;padding: 20px;background: rgba(81,81,255,0.5);} #sakura{display: table-cell;padding: 20px;background: rgba(231,126,176,0.5);} #container{display: table-row;} #table1{display: table;margin: 50px;text-align: center;margin-left: auto;margin-right: auto;} 
 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Home</title> <link type="text/css" rel="stylesheet" href="main.css"> </head> <body> <div id="titl"><h1>NARUTO</h1><sub>never give up</sub></div> <div id="table1"><div id="container"> <div id="naruto"><table><tr><td><img src="images/the_smile_of_uzumaki_by_katsuuyu-d6g8nw6.png" alt="naruto" class="icon"></td></tr><tr><td>NARUTO UZUMAKI</td></tr></table></div> <div id="sasuke"><table><tr><td><img src="images/sasuke__s_smile_by_gaarajapanime-d4n09eb.png" class="icon" alt="sasuke"></td></tr><tr><td>SASUKE UCHIHA</td></tr></table></div> <div id="sakura"><table><tr><td><img src="images/Sakura.PNG" class="icon" alt="sakura"></td></tr><tr><td>SAKURA HARUNA</td></tr></table></div></div></div> </body> </html>
I'm trying to get the space between Naruto Sasuke and Sakura blocks. I represented each div (naruto, sasuke, sakura) as table cells and inserted these three divs in another div (display: table row) and finally in div (id = table1, display: table). please help me.

imageLink: https://drive.google.com/file/d/0B9RbEZnGFP1JUjE3N1NjZGJoUFU/view?usp=sharing

+5
source share
3 answers

If I understand the problem, do you need space between each block? If so, assign a class (i.e. .cell ) to Naruto, Sasuke and Sakura. Then use

 .cell { margin: 0 5px; }

This will add an edge of 0 to the top and bottom and a distance of 5 pixels on each side.

Also avoid repeating in CSS. You can combine display: table-cell;padding: 20px; and put this in your .cell class. It will be easier if you need to change the addition, for example;)

Hope this helps.

+1
source

Paste the following into #table1

 border-spacing:5px; border-collapse:separate;

See fooobar.com/questions/36072 / for more details.

 body{background-image: url(images/boy_naruto_blond_drop_stern_look_24237_1366x768.jpg);background-attachment: fixed; } @font-face{ font-family:pagal; src:url("fonts/Pagal Font.ttf");} @font-face{ font-family:folktale; src:url("fonts/Folktale.ttf"); } #titl{ font-family:folktale; text-align:center; color: aliceblue; font-stretch: ultra-expanded; font-size: 40px; background: rgba(44,95,188,0.3); back } h1{color: rgb(255,201,14);margin-bottom: 0px;padding-bottom: 0px;border: 0px;} sub{margin-top: 0px;padding-top: 0px;border-spacing: 0px;} .icon{height: 150px;width: 200px;text-align: center;} #naruto{display: table-cell;padding: 20px;background: rgba(220,199,48,0.5);} #sasuke{display: table-cell;padding: 20px;background: rgba(81,81,255,0.5);} #sakura{display: table-cell;padding: 20px;background: rgba(231,126,176,0.5);} #container{display: table-row;} #table1{display: table;margin: 50px;text-align: center;margin-left: auto;margin-right: auto; border-spacing:5px; border-collapse:separate;} 
 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Home</title> <link type="text/css" rel="stylesheet" href="main.css"> </head> <body> <div id="titl"><h1>NARUTO</h1><sub>never give up</sub></div> <div id="table1"><div id="container"> <div id="naruto"><table><tr><td><img src="images/the_smile_of_uzumaki_by_katsuuyu-d6g8nw6.png" alt="naruto" class="icon"></td></tr><tr><td>NARUTO UZUMAKI</td></tr></table></div> <div id="sasuke"><table><tr><td><img src="images/sasuke__s_smile_by_gaarajapanime-d4n09eb.png" class="icon" alt="sasuke"></td></tr><tr><td>SASUKE UCHIHA</td></tr></table></div> <div id="sakura"><table><tr><td><img src="images/Sakura.PNG" class="icon" alt="sakura"></td></tr><tr><td>SAKURA HARUNA</td></tr></table></div></div></div> </body> </html>
+1
source

I took a different approach and changed the display: table-cell; on the display: built-in unit;

try this code:

 #naruto{display:inline-block; margin-right:10px;padding: 20px; background: rgba(220,199,48,0.5);} #sasuke{display:inline-block; margin-right:10px;padding: 20px; background: rgba(81,81,255,0.5);} #sakura{display:inline-block; margin-right:10px;padding: 20px; background: rgba(231,126,176,0.5);}
+1
source

More articles:


All Articles