HTML – 如何删除白色间距？

我正在创建一个反馈表单,我希望对它有阴影效果.我试图删除空白区域,以便我的“顶部”图像看起来更像阴影,而不是悬停在窗体上方.我试过显示块0,它仍然无法工作？

.container {
  background: #fff;
  border: 1px solid #ccc;
  margin: auto;
  text-align: left;
  width: 700px;
}
.alignCenter {
  margin: 1em;
}
h1 {
  background-color: #dedede;
  margin: 0;
  min-height: 0;
  padding: 0;
  text-decoration: none;
  text-indent: -8000px;
}
.form_margin {
  margin-bottom: 1.5em;
  margin-top: 3px;
}
body {
  background: #ffffff;
  font-family: "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;
  font-size: small;
  margin: 8px 0 16px;
  text-align: center;
}
.heading {
  font-family: Lucida Grande,sans-serif;
  font-size: small;
}
.message-up {
  vertical-align: top !important;
}
.form_description {
  border-bottom: 1px dotted #ccc;
  clear: both;
  margin-bottom: 1em;
}
.headerImage {
  display: block;
  margin: 10px auto 0;
}

<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" type="text/css" href="css.css">
  <Meta charset="UTF-8">
  <title>Welcome to The Mystery Man Website</title>
</head>

<body>
  <div class="headerImage">
    <img src="Images/top.png" alt="top" width="710 ">
  </div>
  <div class="container">
    <h1>grey bar</h1>
    <div class="alignCenter">
      <form action="" method="post">
        <div class="form_description">
          <h2>User Feedback Form</h2>
          <p>Your suggestions are very appreciated</p>
        </div>
        <!-- Name -->
        <strong><label for="username">Name</label></strong>
        <div class="form_margin">
          <input type="text" name="username" size="30" id="username" placeholder="Your Full Name" />
        </div>
        <!--Email-->
        <strong> <label for="email">Email</label> </strong>
        <div class="form_margin">
          <input type="email" name="email" size="30" id="email" placeholder=" Your Email" />
        </div>
        <!--Feedback-->
        <strong> <label for="Feedback">Feedback</label> </strong>
        <div class="form_margin">
          <textarea rows="10" cols="93" name="Feedback" id="Feedback" placeholder="Your Comments.."></textarea>
        </div>
      </form>

    </div>
  </div>



</body>

</html>

解决方法

由于代码示例中没有实际图像,因此很难猜出您想要的确切样式.但是,您当前没有使用当前css设置间距.底部边距值为0,并且没有定义底部填充.除非您的图像本身具有某种间距或空格,否则图像与表单标题之间不会有空白.

>您是否希望图像直接在表单的标题上投射阴影？
>您希望图像在窗体正上方投射阴影吗？
>您能否将我们链接到图像或提供样本以进一步澄清您的问题和帮助请求？

编辑：Yuor问题是您的图像的自然高度为10px,自然宽度为770px.你的< img>中有一个width = 710的属性也影响高度的元素.目前,您的规则都没有给它一个高度值.这就是为什么改变你的保证金没有做任何事情.当你有display：block元素时,你想要设置宽度和高度.

话虽如此,你需要做的就是给你的< div class =“headerImage”元素一个7到10px的高度(取决于你的目标效果)和一个margin-bottom值(你现在拥有它0)5px到-5px之间的任何东西(同样,取决于你想要的效果).我尝试了各种各样的价值观,但是,由于我不知道你看到的是什么,我无法给你准确的价值. 总之,imageHeader的css应如下所示：

.headerImage {
  display: block;
  margin: 10px auto 0;
  height:10px;

}

注意：对于额外的控制,由于图像(770px)比您的内容更宽,您可以通过给.headerImage增加以下额外规则来限制它：

overflow:hidden;
width:710px;

(仅作为示例)

问候Sotkra

HTML – 如何删除白色间距？

解决方法

相关推荐