html - 去掉 Wrapper 中的空格-6ren

html - 去掉 Wrapper 中的空格

转载作者：行者123 更新时间：2023-11-28 00:59:53

我的 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>

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

最佳答案

您的代码中有一个 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/

文章推荐： javascript - 委内瑞拉电话号码的正则表达式与预期不匹配

文章推荐： css - Styled-components 引用同级组件的 props

文章推荐： css - 如何考虑 AngularJS 组件的样式？

java - and 之间的区别
大家好，我看到了来自 java 项目中的 jsp 页面。想问一下这些html标签有什么区别。请多多指教。示例代码如下: 最佳答案使用struts-html标签库，其中只是普
html - HTML 页面中损坏的 HTML
我有一个页面，我正在从电子邮件中读取 HTML。有时，来自电子邮件的文本包含 HTML 和 CSS，它完全改变了我的页面样式。我不希望我的页面样式因此受到影响。我如何严格阅读特定 div(框)内的
html - HTML 中的图像 - HTML 表中行之间的间距
我知道有类似的问题，但我想对我的特定代码进行一些输入。我有一个图像，我将其切成 9 块，并创建了一个 3x3 HTML 表来显示它。但是我的表在行之间有空格，但在列之间没有空格。我没有使用任何 C
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 为什么我的本地 html 链接会转到父文件夹而不是 .html？
编辑:Waylan 的回答成功了!谢谢! 我正在尝试压缩文档的 .html 文件以发送给客户。目标是获得与浏览实际网站相同的体验。打开 .html 文件时，单击的任何链接都会转到父文件夹，而不是特定
html - 如何解析和规范化来自不同 HTML 生成器的 HTML？
这是 question 的扩展.我正在尝试解析嵌入在 Blogger 博客的 XML 备份中的 HTML 片段，并用 InDesign 标签重新标记它们。 Blogger 并未对其任何帖子的 HTML
html - html 元素之间的换行符破坏了 html 布局
我知道在 html 中元素之间的换行符被视为空格，但我认为当您尝试使用响应式布局时这非常可怕。例如，这里我们有预期和正确的行为，但要获得它，我必须删除元素之间的 html 中的换行符: https:
html - 将带有 html 标签的文本显示为 html
我正在尝试将文本文件显示为 html。我正在使用 ionic 。我正在发送一个 html 格式的响应，但在一个文本文件中发送到配置文件页面。它在 .ts 页面的变量名中。 @Component({
html - 如何在 html 中显示 html？
假设我有一个 html 文档: test 我想在浏览器中显示该代码。然后我会创建类似的东西: <html>test<html> 为了在中间制作 gubbins，我有一个函数
html - HTML 元素和 HTML 标签有什么区别？
HTML 元素和 HTML 标签有什么区别？渲染有什么区别吗？使用标签或元素时有什么特殊注意事项吗？最佳答案是一个标签，特别是一个开始标签也是一个标签，一个结束标签 This is a para
html - 降低 html 表格高度和过度滚动 - HTML
我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。请问我该如何实现？ CSS #table{
html - 查看 HTML 代码而不是呈现的 HTML
我记得有一个 Linux 命令可以从给定的 URL 返回 HTML 代码。您可以将 URL 作为此命令的参数，然后返回 HTML 代码，而不是在浏览器中输入 URL。哪个命令执行此操作？最佳答案
html - 在 html 中显示 html
我有一个 html 页面，我想在其中包含另一个有很多链接的 html 页面。我能够使用 iframe 实现它，但我希望 iframe 内的页面具有与原始页面相同的文本和链接颜色属性，我不想要滚动条，我
html - 如何从另一个 HTML 加载部分 HTML？
我正在使用 HTML 写一本书。如果我把它写在一个 html 文件中，整个代码就会变长，所以我想将每一章保存到不同的文件中，然后将它们加载到主 html 中。我的意思是有像 chapter1.html
html - 将 html 页面重定向到另一个 html
在显示之前，我必须将一个网站重定向到另一个网站。我试过使用 .htaccess，但它给我带来了问题。我也使用过 javavscript 和 meta，但在加载我要从中传输的页面之前它不起作用。帮助？
html - 将网页 html 转换为电子邮件 html
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
html - 使用 html 打印 ""
如何打印“html”标签，包括“”？如何在不使用文本区域和 Javascript 的情况下对任何标签执行此操作？最佳答案使用HTML character references : <html
html - 如何将 html.slim 文件转换为 html 或 html.erb？
我需要将 Ruby on Rails 应用程序中的 html.slim 文件转换为 html.erb。有什么简单的方法吗？我尝试了 Stack Overflow 和其他网站中列出的许多选项。但对我没有
html - 没有标签可以创建 HTML 文档吗？
这个问题在这里已经有了答案: Is it necessary to write HEAD, BODY and HTML tags? (6 个答案) 关闭 8 年前。我在 gitHub 上找到了这个
html - 什么是加载外部资源的 HTML 元素列表？ (HTML 电子邮件)
如果不允许通过 JavaScript 进行额外的 DOM 操作，我正在寻找可以加载外部资源的元素列表。我正在尝试使用 HTML 查看器托管来自第三方的电子邮件，当发生这种情况时，我需要删除任何自动加载

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 去掉 Wrapper 中的空格