為什么我的 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.