控制按钮之间的间隙，以粘性形式输入字段答案

【问题标题】：Control gap between button, field input in sticky form控制按钮之间的间隙，以粘性形式输入字段
【发布时间】：2022-01-03 02:38:16
【问题描述】：

我构建了一个固定在页面底部位置的粘性表单。

我想缩小这种粘性形式的差距：

在输入和按钮之间
按钮和框架之间
输入和帧之间

当前代码链接：https://jsfiddle.net/bvotcode/n0cp1Lyu/8/

HTML

<!-- Sticky form -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body> 
    <!-- this div will give a gap of 30px --> 
    <div class="gap"></div> 
 
    <div class="stickybottomform">
        <div class="w3-center w3-padding-16" style="margin-top:0px">
            <div class="w3-row">
                <form action="/action_page.php">
                    <div class="w3-row-padding" 
                         style="margin:0 -16px 8px -16px">
        
                        <div class="w3-col" 
                             style="width:50%;padding:2px">
                            <input class="w3-input w3-border" 
                                   type="text" placeholder="Name" 
                                   name ="name" required/>
                        </div>
                        <div class="w3-col" 
                             style="width:50%;padding:2px">
                            <input class="w3-input w3-border" 
                                   type="text" placeholder="Phone"  
                                   name="handynumber" required/>
                        </div>
                    </div>
                </form>
                <button class="w3-button w3-green w3-section 
                        w3-center fas fa-shopping-cart fa" 
                        type="submit" value="stickyformsubmit">
                    Submit
                </button>
            </div>
        </div>    
</body>

CSS

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem; 
}

div.stickybottomform {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    border: 2px solid blue;
    background-color: #e8e8e8;
    padding: 10px;
    font-size: 20px;
}
.gap{
    width:100%; 
    height:3000px; 
}

谢谢

【问题讨论】：

标签： html css forms sticky-footer

【解决方案1】：

你可以通过简单地删除这两个类w3-padding-16w3-section来缩小差距。

删除w3-padding-16会让你缩小差距

在输入和按钮之间以及 3. 在输入和框架之间，

同时删除w3-section会缩小差距

在按钮和框架之间

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

div.stickybottomform {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  border: 2px solid blue;
  background-color: #e8e8e8;
  padding: 10px;
  font-size: 20px;
}

.gap {
  width: 100%;
  height: 3000px;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<div class="gap"></div>

<div class="stickybottomform">
  <div class="w3-center" style="margin-top: 0px">
    <div class="w3-row">
      <form action="/action_page.php">
        <div class="w3-row-padding" style="margin: 0 -16px 8px -16px">
          <div class="w3-col" style="width: 50%; padding: 2px">
            <input class="w3-input w3-border" type="text" placeholder="Name" name="name" required />
          </div>
          <div class="w3-col" style="width: 50%; padding: 2px">
            <input class="w3-input w3-border" type="text" placeholder="Phone" name="handynumber" required />
          </div>
        </div>
      </form>
      <button class="w3-button w3-green w3-center fas fa-shopping-cart fa" type="submit" value="stickyformsubmit">Submit</button>
    </div>
  </div>
</div>

【讨论】：