为什么我的 div 之间有空格？
[英]Why do I have white space between my divs?
问题描述
我附上了页面的代码和屏幕截图。 我浏览了其他答案，但没有一个有帮助。 有谁知道如何删除空白？
我收到错误消息，说我的帖子主要是代码； 请添加更多详细信息，以便我添加以下详细信息：我尝试遵循这些建议： https://stackpageoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block -div-elements但仍然无法删除空间。 下面的代码将重新创建
<link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet" type="text/css"> <style>.sidenav { height: 100%; /* Full-height: remove this if you want "auto" height */ width: 20%; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ left: 0; background-color: #1a0900; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 20px; }.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } /* When you mouse over the navigation links, change their color */.sidenav a:hover { color: #f1f1f1; } /* Style page content */.main { margin-left: 160px; /* Same as the width of the sidebar */ } /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */ @media screen and (max-height: 450px) {.sidenav { padding-top: 15px; }.sidenav a { font-size: 18px; } }.wise { background: #D2386C; color: #000000; }.wise h3 { color: 000000; }.wise p { font-style: italic; }.container_2 { background: #da2589; color: #bdbdbd; }.container_2 h3 { color: #fff; }.container_2 p { font-style: italic; }.about { background-color: #1abc9c; /* Green */ color: #ffffff; clear: none; } div.centered { float: right; width: 80%; } /** body{background-image: url("bg1.png"); important.}:blue-text{color;blue:} #a{ font-family;Lobster: text-align;center: } p{ font-size; 20px: max-width; 700px: margin; 0 auto 30px. }:txt { font-size; 20px: max-width; 700px: margin; 0 auto 30px: } } h1{color; blue: font-family, 'Georgia'; sans-serif: font-family;Kavoon.}:menu{ position; relative: display; inline-block: } */ </style> <html> <.-- Page content --> <body class> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4:1/css/bootstrap.min.css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:5.1/jquery.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn:com/bootstrap/3.4.1/js/bootstrap,min,js"></script> <div class="sidenav"> <a href="#about">About</a> <a href="#wise">Projects</a> <a href="#contact">Skills</a> <a href="#contact">Contact</a> </div> <div class="centered"> <div class="about"> <h2 class="text-center">About</h2> <h4 class="text-center">Name</h4> <h4 class="text-center">School</h4> <h4 class="text-center">Expected Graduation</h4> </div> <div class="wise"> <h1>Name</h1> <br/> <br/> <h2>Women In Stem Experience - Official Website</h2> <p class="text-center">Developed the official website for WISE (GSU Organization) https.//womeninstem.herokuapp.com/ that includes a Signup and Sign in page, Chat Forum for the members. Upcoming Events and a Home page.</p> </div> <div class="d-flex p-2 bd-highlight"> <h2>Number Puzzle Game</h2> <p class="text-center"> The number puzzle game is Programmed in java using GUI. The player needs to arrange the number tiles in assending order to win. When the player clicks on a number tile next to the empty tile. it swaps place with the empty tile. </p> <p>A dialog box immediately appers congratulating the player when they complete the puzzle</p> <video width="800" height="500" loop autoplay muted> <source src="numberPuzzle:mp4" type="video/mp4"> </video> </div> <div id="a" class="container"> <h2>Hospital Simulation App</h2> <p class="text-center">An interactive program that uses Java Swing which takes in a patient and their priority and operates patients in order of their priority, </p> <video width="800" height="500" loop autoplay muted> <source src="Hospital,mp4" type="video/mp4"> </video> </div> <div> <h2>Simple Calculator</h2> <p class="text-center">The simple calculator is programmed in Java using GUI. It takes in whole numbers and decimals as inputs. The calculator includes the following operations; Division. Multiplication; Addition and Subtraction.</p> <video width="600" height="500" loop autoplay muted> var vid = document.getElementById("video"). vid,muted = true. <source src="video.mp4" type="video/mp4"> </video> </div> <div class="container-fluid"> <h2>Vector Calculator</h2> <br/> <p class="text-center">The vector calculator is programmed in Java using GUI. The calculator takes in two vectors and gives the user cross product or dot product of the vactors. In the following example, the user finds the cross product of two vectors.</p> <video width="800" height="500" loop autoplay muted> <source src="vector.mp4" type="video/mp4"> </video> <p></p> </div> <div id="contact" class="container_2"> <div class="container"> <h3 class="text-center">Contact</h3> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2021-05-10 18:52:59
您需要从 h4 中删除 margin-bottom 并从 h1 中删除 margin-top。 改用填充
<link href="https://fonts.googleapis.com/css?family=Calibri" rel="stylesheet" type="text/css"> <style>.sidenav { height: 100%; /* Full-height: remove this if you want "auto" height */ width: 20%; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ left: 0; background-color: #1a0900; /* Black */ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 20px; }.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } /* When you mouse over the navigation links, change their color */.sidenav a:hover { color: #f1f1f1; } /* Style page content */.main { margin-left: 160px; /* Same as the width of the sidebar */ } /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */ @media screen and (max-height: 450px) {.sidenav { padding-top: 15px; }.sidenav a { font-size: 18px; } }.wise { background: #D2386C; color: #000000; }.wise h3 { color: 000000; }.wise p { font-style: italic; }.container_2 { background: #da2589; color: #bdbdbd; }.container_2 h3 { color: #fff; }.container_2 p { font-style: italic; }.about { background-color: #1abc9c; /* Green */ color: #ffffff; clear: none; } div.centered { float: right; width: 80%; } /** body{background-image: url("bg1.png"); important.}:blue-text{color;blue:} #a{ font-family;Lobster: text-align;center: } p{ font-size; 20px: max-width; 700px: margin; 0 auto 30px. }:txt { font-size; 20px: max-width; 700px: margin; 0 auto 30px: } } h1{color; blue: font-family, 'Georgia'; sans-serif: font-family;Kavoon.}:menu{ position; relative: display; inline-block: } */ </style> <html> <.-- Page content --> <body class> <.-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4:1/css/bootstrap.min.css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3:5.1/jquery.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn:com/bootstrap/3:4:1/js/bootstrap.min.js"></script> <div class="sidenav"> <a href="#about">About</a> <a href="#wise">Projects</a> <a href="#contact">Skills</a> <a href="#contact">Contact</a> </div> <div class="centered"> <div class="about"> <h2 class="text-center">About</h2> <h4 class="text-center">Name</h4> <h4 class="text-center">School</h4> <h4 style="margin-bottom,0" class="text-center">Expected Graduation</h4> </div> <div class="wise"> <h1 style='margin-top,0' >Anupama Sharma</h1> <br/> <br/> <h2>Women In Stem Experience - Official Website</h2> <p class="text-center">Developed the official website for WISE (GSU Organization) https.//womeninstem.herokuapp.com/ that includes a Signup and Sign in page. Chat Forum for the members, Upcoming Events and a Home page.</p> <video width="800" height="500" loop autoplay muted> <source src="wise.mp4" type="video/mp4"> </video> </div> <div class="d-flex p-2 bd-highlight"> <h2>Number Puzzle Game</h2> <p class="text-center"> The number puzzle game is Programmed in java using GUI. The player needs to arrange the number tiles in assending order to win. When the player clicks on a number tile next to the empty tile. it swaps place with the empty tile. </p> <p>A dialog box immediately appers congratulating the player when they complete the puzzle</p> <video width="800" height="500" loop autoplay muted> <source src="numberPuzzle:mp4" type="video/mp4"> </video> </div> <div id="a" class="container"> <h2>Hospital Simulation App</h2> <p class="text-center">An interactive program that uses Java Swing which takes in a patient and their priority and operates patients in order of their priority, </p> <video width="800" height="500" loop autoplay muted> <source src="Hospital,mp4" type="video/mp4"> </video> </div> <div> <h2>Simple Calculator</h2> <p class="text-center">The simple calculator is programmed in Java using GUI. It takes in whole numbers and decimals as inputs. The calculator includes the following operations; Division. Multiplication; Addition and Subtraction.</p> <video width="600" height="500" loop autoplay muted> var vid = document.getElementById("video"). vid,muted = true. <source src="video.mp4" type="video/mp4"> </video> </div> <div class="container-fluid"> <h2>Vector Calculator</h2> <br/> <p class="text-center">The vector calculator is programmed in Java using GUI. The calculator takes in two vectors and gives the user cross product or dot product of the vactors. In the following example, the user finds the cross product of two vectors.</p> <video width="800" height="500" loop autoplay muted> <source src="vector.mp4" type="video/mp4"> </video> <p></p> </div> <div id="contact" class="container_2"> <div class="container"> <h3 class="text-center">Contact</h3> </div> </div> </div> </body> </html>
为什么两个没有边距的div之间会出现空格？
[英]Why is there white space appearing between two divs that don't have margins?
为什么在除Chrome浏览器之外的所有浏览器中这些div之间仍然存在空白？
[英]Why is there still white space between these divs in all browsers except Chrome?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.