<br> 标签对 chrome 没有影响答案

【问题标题】：<br> tag having no effect on chrome<br> 标签对 chrome 没有影响
【发布时间】：2025-12-21 06:45:07
【问题描述】：

我使用<br> 标签来提供 html 表单样式的垂直空间。这在 Firefox 中运行良好，但不会更改 google chrome 中的 spcaing。请让我知道错误。

头部部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

我的表单的一部分是：

<div id="filter-details"> 
 <form action="" method="post">
 From Date-Time:<br />
 <input type="text" id="startdate" name="startdate" value="">
 <br />
 To Date-Time:<br />
 <input type="text" id="enddate" name="enddate" value="">
 <br />

CSS 样式表：

br {
    margin-bottom: 5.7px;
}

【问题讨论】：

标签： html css xhtml

【解决方案1】：

为谷歌浏览器添加以下css代码，设置content:" ";

br{
  display: block;
   margin: 5.7px 0;
  content: " ";
}

br{
  display: block;
   margin: 5.7px 0;
  content: " ";
}

<div id="filter-details"> 
 <form action="" method="post">
 From Date-Time:<br />
 <input type="text" id="startdate" name="startdate" value="">
 <br />
 To Date-Time:<br />
 <input type="text" id="enddate" name="enddate" value="">
 <br />

【讨论】：

【解决方案2】：

换行符应该只是换行符。看起来您正在尝试控制行高。更好的方法是将line-height 属性应用于包含元素。

#filter-details form {
  line-height: 1.8;
}

<div id="filter-details">
  <form action="" method="post">
    From Date-Time:
    <br />
    <input type="text" id="startdate" name="startdate" value="">
    <br />To Date-Time:
    <br />
    <input type="text" id="enddate" name="enddate" value="">

【讨论】：

【解决方案3】：

您不应该指望br 在不同的浏览器中以相同的方式响应各种样式。您可以更改的唯一属性是font-size。

所以这是给br 额外高度的方法。

br {
  font-size:1.4em;
}

<div id="filter-details"> 
 <form action="" method="post">
 From Date-Time:<br />
 <input type="text" id="startdate" name="startdate" value="">
 <br />
 To Date-Time:<br />
 <input type="text" id="enddate" name="enddate" value="">
 <br />

【讨论】：

仍然面临一些问题。虽然 chrome 是固定的，但 Firefox 显示的尺寸相当大。我也尝试过使用字体大小，diditn 帮助。还尝试重置 css 属性。