html中表单之间的距离怎么改

在HTML中，调整表单之间的距离可以通过多种方法实现，主要包括CSS样式设置，下面我将详细为大家介绍几种调整表单间距的方法。

html中表单之间的距离怎么改

我们需要了解HTML表单的基本结构，一个简单的表单通常由<form>标签包裹，里面包含各种表单控件，如输入框、按钮等，当我们想要调整表单之间的距离时，主要是针对这些控件进行样式调整。

方法一：使用CSS的margin属性

1、内联样式：直接在表单控件标签中添加style属性，然后设置margin值。

示例代码：

Markup

<form>
  <input type="text" style="margin-bottom: 20px;" />
  <input type="text" style="margin-bottom: 20px;" />
  <input type="submit" />
</form>

在这个例子中，我们给每个输入框设置了底部外边距为20px。

2、内部样式表：在<head>标签中添加<style>标签，然后编写CSS规则。

示例代码：

Markup

<head>
  <style>
    .form-input {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <form>
    <input type="text" class="form-input" />
    <input type="text" class="form-input" />
    <input type="submit" />
  </form>
</body>

这里，我们为输入框添加了一个类.form-input，并在CSS中设置了这个类的margin-bottom属性。

方法二：使用CSS的padding属性

除了使用margin，我们还可以使用padding属性来调整表单控件之间的距离。padding用于设置元素的内边距。

示例代码：

Markup

<head>
  <style>
    .form-group {
      padding-bottom: 20px;
    }
  </style>
</head>
<body>
  <form>
    <div class="form-group">
      <input type="text" />
    </div>
    <div class="form-group">
      <input type="text" />
    </div>
    <input type="submit" />
  </form>
</body>

在这个例子中，我们为每个输入框包裹了一个<div>标签，并给这个<div>添加了.form-group类，在CSS中设置了这个类的padding-bottom属性。

方法三：使用CSS的box-sizing属性

我们可能需要对表单控件的整体尺寸进行调整，这时，可以使用box-sizing属性。

示例代码：

Markup

<head>
  <style>
    input[type="text"] {
      margin-bottom: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <form>
    <input type="text" />
    <input type="text" />
    <input type="submit" />
  </form>
</body>