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

Question

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

我想缩小此粘性表格中的间隙：

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

当前代码link：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; 
}

谢谢

Answer 1

你可以通过简单地删除这两个来缩小差距类 w3-padding-16 w3-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>

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

Control gap between button, field input in sticky form

html

css

forms

sticky-footer