html - 去掉 Wrapper 中的空格

标签 html css

我的 wrapper 中有空格，我无法摆脱它们。即使我将 paddings 设置为 0，仍然有空间。我不知道是什么问题。我不想将包装器放在 body 标签中，这样我以后可以更改我想要的内容。

我是 HTML 新手 :)

我的代码

/*Mohammed Alnujaydi*/

body {background-color:#FCEBB6; color:#221811; font-family: Verdana, Geneva, sans-serif	;
background-image: url(images/background.gif);}

header {background-color:#D2B48C;  height: 150px; background-image: url(images/javajamlogo.jpg);
       background-repeat: no-repeat;}

h1 {  padding-top:45px; padding-left:220px; font-size:3em;}


h2{padding-left:3em; padding-right:2em;}

h3{padding-left:3em; padding-right:2em;}

	P{padding-left:3em; padding-right:2em;}
	
	div{padding-left:3em; padding-right:2em;}
	
	ul{padding-left:3em; padding-right:2em;}
	
	dl{padding-left:3em; padding-right:2em;}


 nav
 
 {font-weight:Bold; text-align: center;  word-spacing: 1em; font-size:1.5em; padding-top:10px ; 
 float:left; width:200px;
 }
  nav a { text-decoration: none; }
  
   nav a:link { color: #FEF6C2;}

 nav a:visited { color: #D2B48C;}  
 
  nav a:hover  { color: #CC9933;} 
  
    nav ul { list-style-type:none; padding-left:0em;}

  
  h4{ background-color:#D2B48C; font-size:1.2em; padding-left:3em; padding-bottom:0em; padding-right:2em; text-transform:uppercase; border-bottom-style; clear:left;}
  
  main{padding-left:0em; padding-right:0em; padding-bottom:2em; padding-top:0em; background-color: #FEF6C2;margin-left:200px;}
  
  .details {padding-left:20%; padding-right:20%; overflow: auto;}
  
  img{padding-left:10px; padding-right:10px;}
 
 footer {background-color:#D2B48C; font-size:.60em; font-style:italic;text-align:center; padding-bottom:10px;
 border-top :solid 2px; color:#221811;}
 
  #wrapper { width: 80%; margin-left: auto; 
           margin-right: auto; background-color:#FEF6C2; min-width:900px; max-width:1280px; box-shadow:  5px 5px;  }
			
			
 *{ box-sizing: border-box; }
			
#heroroad {background-image:url(images/heroroad.jpg);background-size:100%;height:250px;}


#heromugs{background-image:url(images/heromugs.jpg);background-size:100%; height:250px;}  


#heroguitar {background-image:url(images/heroguitar.jpg);background-size:100%; height:250px;}

.floatleft {float:left; padding-right:2em; padding-bottom:2em;}

header, nav, main, footer { display: block; }
<!DOCTYPE html>
<html lang="en">


<head>

<title> JavaJam Coffee House Menu

</title>

   <meta charset="utf-8">
   <link rel="icon" type="image/x-icon" href="images/favicon.ico">
   
   <link rel="stylesheet" href="javajam.css">
   </head>
<body>

 <div id="wrapper">

 <header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
 <a href="index1.html"> Home</a></li> <li> Menu </li> <li><a href="music.html"> Music</a></li> <li>Job </li> </ul>  </nav>
 
 <main>

 <div id ="heromugs">
 </div>
 
 <h2> Coffee at JavaJam</h2>
 <p>Indulge in our locally roasted free-trade coffee and enjoy the aroma, 
 the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you &mdash; purchase &mdash; ask the barista for details
 <dl>
 <dt> <strong> Just Java </strong></dt>
 <dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>

Endless Cup $3.00</dd>

 <dt> <strong> Cafe au Lait</strong></dt>
 
 <dd>House blended coffee infused into a smooth, steamed milk.<br>

Single $2.00 Double $4.00</dd>

 <dt> <strong> Iced Cappuccino </strong></dt>
 <dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>

Single $4.75 Double $6.00 </dd>
</dl>
</main>
<br>
  <footer>

Copyright &copy; 2018 JavaJam Coffee House<br>


<a href="mailto:Malnujaydi@dbq.edu">Malnujaydi@dbq.edu</a>


</footer>
</div>

  </body>
</html>

这是一张澄清的图片(蓝色的空间)

image

最佳答案

您的代码中有一个 css 样式，为所有 div 元素填充 padding-left:3em; padding-right:2em，所以我删除了它。结果是否低于您的预期？

body {
  background-color: #FCEBB6;
  color: #221811;
  font-family: Verdana, Geneva, sans-serif;
  background-image: url(images/background.gif);
}

header {
  background-color: #D2B48C;
  height: 150px;
  background-image: url(images/javajamlogo.jpg);
  background-repeat: no-repeat;
}

h1 {
  padding-top: 45px;
  padding-left: 220px;
  font-size: 3em;
}

h2 {
  padding-left: 3em;
  padding-right: 2em;
}

h3 {
  padding-left: 3em;
  padding-right: 2em;
}

P {
  padding-left: 3em;
  padding-right: 2em;
}


/*	div{padding-left:3em; padding-right:2em;} */

ul {
  padding-left: 3em;
  padding-right: 2em;
}

dl {
  padding-left: 3em;
  padding-right: 2em;
}

nav {
  font-weight: Bold;
  text-align: center;
  word-spacing: 1em;
  font-size: 1.5em;
  padding-top: 10px;
  float: left;
  width: 200px;
}

nav a {
  text-decoration: none;
}

nav a:link {
  color: #FEF6C2;
}

nav a:visited {
  color: #D2B48C;
}

nav a:hover {
  color: #CC9933;
}

nav ul {
  list-style-type: none;
  padding-left: 0em;
}

h4 {
  background-color: #D2B48C;
  font-size: 1.2em;
  padding-left: 3em;
  padding-bottom: 0em;
  padding-right: 2em;
  text-transform: uppercase;
  border-bottom-style;
  clear: left;
}

main {
  padding-left: 0em;
  padding-right: 0em;
  padding-bottom: 2em;
  padding-top: 0em;
  background-color: #FEF6C2;
  margin-left: 200px;
}

.details {
  padding-left: 20%;
  padding-right: 20%;
  overflow: auto;
}

img {
  padding-left: 10px;
  padding-right: 10px;
}

footer {
  background-color: #D2B48C;
  font-size: .60em;
  font-style: italic;
  text-align: center;
  padding-bottom: 10px;
  border-top: solid 2px;
  color: #221811;
}

#wrapper {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #FEF6C2;
  min-width: 900px;
  max-width: 1280px;
  box-shadow: 5px 5px;
}

* {
  box-sizing: border-box;
}

#heroroad {
  background-image: url(images/heroroad.jpg);
  background-size: 100%;
  height: 250px;
}

#heromugs {
  background-image: url(images/heromugs.jpg);
  background-size: 100%;
  height: 250px;
}

#heroguitar {
  background-image: url(images/heroguitar.jpg);
  background-size: 100%;
  height: 250px;
}

.floatleft {
  float: left;
  padding-right: 2em;
  padding-bottom: 2em;
}

header,
nav,
main,
footer {
  display: block;
}
<div id="wrapper">

  <header>
    <h1>JavaJam Coffee House</h1>
  </header>
  <nav>
    <ul>
      <li>
        <a href="index1.html"> Home</a></li>
      <li>
        Menu
      </li>
      <li>
        <a href="music.html"> Music</a>
      </li>
      <li>
        Job
      </li>
    </ul>
  </nav>

  <main>

    <div id="heromugs">
    </div>

    <h2> Coffee at JavaJam</h2>
    <p>Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you &mdash; purchase &mdash; ask the barista for details
      <dl>
        <dt> 
                    <strong> Just Java </strong>
                </dt>
        <dd>
          Regular house blend, decaffeinated coffee, or flavor of the day.<br> Endless Cup $3.00
        </dd>
        <dt>
                    <strong> Cafe au Lait</strong>
                </dt>
        <dd>
          House blended coffee infused into a smooth, steamed milk.<br> Single $2.00 Double $4.00
        </dd>
        <dt>
                     <strong> Iced Cappuccino </strong>
                </dt>
        <dd>
          Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br> Single $4.75 Double $6.00
        </dd>
      </dl>
    </p>
  </main>
  <br>
  <footer>
    Copyright &copy; 2018 JavaJam Coffee House<br>
    <a href="mailto:Malnujaydi@dbq.edu">Malnujaydi@dbq.edu</a>
  </footer>
</div>

关于html - 去掉 Wrapper 中的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52728130/

上一篇：css - 如何考虑 AngularJS 组件的样式？

下一篇：css - Styled-components 引用同级组件的 props

相关文章：

html - 如何使用 SVG 屏蔽图像并在屏蔽部分周围添加颜色描边？

javascript - 使用 jQuery 更改导航

java - 我们可以在不使用java中的表单的情况下检索输入元素的值吗？

html - 任意大小的 img 的静态最大/最小宽度

javascript - 访问 li ul 中的 href 元素

html 电子邮件模板不在 Outlook 中呈现属性

javascript - 居中的 div 没有正确溢出

html - 应用 onmouseover 更改文本

php - 为什么不解释 Twig 标签？

html - 如何在 CSS 表格行之间添加空格？

©2024 IT工具网  联系我们