如何在两个div之间添加空格？
在两个div之间添加空格可以通过以下几种方式实现：
- 使用CSS的margin属性：可以通过设置第一个div的margin-bottom属性或者第二个div的margin-top属性来添加空格。例如，设置第一个div的margin-bottom为10px，即可在两个div之间添加10像素的空格。
- 使用CSS的padding属性：可以通过设置第一个div的padding-bottom属性或者第二个div的padding-top属性来添加空格。例如，设置第一个div的padding-bottom为10px，即可在两个div之间添加10像素的空格。
- 使用CSS的伪元素::before或::after：可以通过在第一个div的::after伪元素或者第二个div的::before伪元素中添加content属性，并设置其display为block，再通过设置其height属性来添加空格。例如，设置第一个div的::after伪元素的height为10px，即可在两个div之间添加10像素的空格。
- 使用HTML的空格字符：可以在两个div之间直接插入HTML的空格字符。例如，可以在第一个div的闭合标签与第二个div的开启标签之间添加 ，即可添加一个空格。
需要注意的是，以上方法中的margin和padding属性可以根据具体需求进行调整，伪元素和空格字符的方法可以在需要添加空格的位置进行灵活使用。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
相关·内容
当我搜索只有一个单词的东西时，它会显示结果，但是当我搜索有两个单词的东西时，它不会显示结果。这可能是由于them...Any解决方案之间的空间？
This is the code which I am using:
<?php include("config.php");
include("session-user.php");
if(isset($_POST['search']) && $_POST['search'] != "") {
$searchq = $_POST['sea
浏览 4提问于2016-05-23得票数 2
回答已采纳
1回答
文本-对齐:证明不起作用
、、、
在过去的几天里，我已经成功地使用了描述的方法。
它说明了如何通过对父容器应用文本对齐:正确性来避免计算网格中块的基于百分比的边距。
An :在psuedo元素之后，确保始终有"text“被强制放到下一行，以确保它是正确的。
但是在中，这些块没有响应文本对齐:正当性。下面的代码在其他地方运行得很好，所以我遗漏了一些东西。
HTML
<div class="container"><div class="contents"></div><div class="contents"></div&
浏览 2提问于2014-12-28得票数 1
回答已采纳
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-bl
浏览 95提问于2013-08-16得票数 90
回答已采纳
我有两个元素，包含带有内联块属性的div。
此容器中div的代码不缩进：
<div class="container-no-indentation">
<div>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div>
</div>
浏览 3提问于2015-04-18得票数 2
回答已采纳
2回答
我正面临一个问题。我检查了许多其他StackOverflow线程，但没有一个适用于我的场景。因此，基本上，我有两个div，一个在另一个之上转换为一个指定的值。但是，在转换的div和h1文本之间有很多空白，我想删除它们。
这是我的代码：
.div1,
.div2 {
height: 200px;
}
.div1 {
background-color: aqua;
width: 200px
}
.div2 {
width: 190px;
transform: translateY(-20%);
background-color: purple;
z-index:
浏览 1提问于2021-08-07得票数 1
回答已采纳
12回答
在我拥有的两个div之间出现了一些奇怪的空格。
每个div都有css属性display: inline-block，每个div都有一个设置的高度和宽度。
我找不到空格在哪里。
浏览 0提问于2012-03-04得票数 21
回答已采纳
1回答
我对web非常陌生，所以请容忍我。我正在使用Jekyll生成我的网页。因此，我创建了一些自定义类，并在相应的css文件中指定了_sass属性。
以下是与这个问题有关的两个类别：
.quote{
width: 100%;
margin: auto;
text-align: center;
background-color: #171717;
font-size: 25px;
padding: 10px;
&.author{
width: 50%;
浏览 4提问于2020-05-31得票数 0
回答已采纳
2回答
我有一个简单的html，其div受宽度限制。在我的内部，我有许多用span配置的nowrap标记。我的css：
.content {
width: 50%;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.adder {
color: blue;
cursor: pointer;
}
.added {
position: relative;
white-space: nowrap;
}
我的html：
<div class="content"&
浏览 3提问于2015-05-02得票数 2
回答已采纳
直观地说，空格或code将被忽略在两个块标记之间，尽管我们用空格对其进行编码。如下所示：
<div>
foo
</div>
<!-- no matter how much space or wrap when we code -->
<div>
foo
</div>
正如我们所知道的，空间将被折叠为两个内联元素之间的一个空间。那么块元素的规则是什么呢？它真的被浏览器忽略了吗？
浏览 0提问于2019-02-11得票数 0
回答已采纳
在示例中，用户名、密码和登录按钮是不借助JavaScript (我在两种情况下都禁用了JS并刷新)、边距、填充等等来分隔的。这些元素是如何间隔的？div.form-group对我来说是个谜。我自己也试过模仿代码。我正在使用Bootstrap的CSS和JS。在我的HTML中，这三个元素之间没有空格。在禁用JS并尝试各种样式之后，我无法解释如何在Bootstrap Jumbotron示例中实现间距。除了间距上的差异，我的元素的大小也略有不同。我的密码输入是160px wide与填充的12px和边界的1px，而正确的Jumbotron示例是170px wide。这两种计算的宽度都是auto。我如何获
浏览 2提问于2016-02-03得票数 1
回答已采纳
1回答
我需要在容器中间，而不是在start div和end div之间的空间中间对徽标进行居中。有没有办法用柔性盒来做呢？
下面是以两个div之间的中间空间为中心的徽标快照：
我的代码：
/* =======Header Start======= */
.bar-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
padding-bottom: 15px;
border-bottom: 2px solid #3e3e
浏览 0提问于2018-07-19得票数 0
回答已采纳
我有一个在我的代码中一直在重用的组件，现在我想在我正在使用的两个组件之间添加一些间距。使用内联样式、CSS模块，甚至是带有类名的全局CSS文件都不会做任何事情，我也不想修改组件的间距。我真的不想修改组件内部的间距，因为它在其他情况下工作得很好，我正在使用这些组件，只有在这一种情况下，我才想在组件之间添加一个小的间隔。
下面是我想要添加间距的两个组件。
<EditTeamButtons showDelete={true} />
<TeamView team={[]} cols={6} />
<EditTeamButtons showDelet
浏览 0提问于2021-05-09得票数 0
我使用float: left设法将两个div放在另一个旁边，但是下面的div没有正确显示：
对于每个div，使用这个css：
display: inline-block;
width: 50%;
请参阅：
他们是一个之上另一个。我必须让width: 49%使他们彼此相邻。
这怎么可能？
浏览 3提问于2014-04-13得票数 0
回答已采纳
6回答
我想内联显示两个div，一个div是25%，另一个是75%，当我使用：
display: inline-block;
它似乎在两个div之间产生了差距，这显然将75%的div降低。
我该如何消除这一差距？我用：
vertical-align: top;
这消除了顶部的缺口..。现在，只是需要消除这方面的差距。
看这里，。
浏览 5提问于2013-08-22得票数 1
回答已采纳
<div class="item">
<div class="name">
<input type="text" class="XXX">
</div>
</div>
<div class="item">
<div class="name">
<input type="text" class="XXX">
</div>
浏览 3提问于2012-07-21得票数 0
回答已采纳
我有两个固定内容的内联块，我试着把它们放在一起显示。
它们都保存在width: 1000px;的div中，两个内联块div分别是width: 400px;和width: 600px;。
然而，这两个div没有内联显示，第二个div在第一个div下面折叠，如果我将第二个div的宽度降为width: 550px;，它们都会内联显示，我的问题是：
为什么宽度为1000px;的容器中不能同时容纳宽度为1000px的两个分区
在下面拉小提琴。
<div class="layout">
<div class="width">
<di
浏览 1提问于2015-04-30得票数 1
4回答
我有两个相互嵌套的div标签和几个span标签，如下所示：
<div id="leftcol">
<div id="tagcloud">
<span class="mytags"><a href="">tag1</a></span>
<span class="mytags"><a href="">tag2</a></span>
浏览 57提问于2010-09-26得票数 29
回答已采纳
3回答
有人能帮我解决以下问题吗？如何清除div "top“和div”中间“之间的空白？这只是我HTML代码的一部分。在浏览器中，我可以看到两个div之间有一个空白。怎样才能摆脱这个空间？
<div class="container">
<div class="top">
</div>
<div class="middle">
</div>
</div>
浏览 0提问于2019-03-09得票数 0
回答已采纳
这是我的代码。我还没有完成标题下任何内容的格式化。但我试图让h2(有图片的那个)居中，不留空格。我试过在parent中修改字体空间和删除填充，但似乎都不起作用。我只想在CSS中做到这一点。
代码：
body {
background-color: blue;
}
div {
background-color: white;
padding: 25px;
}
h1 {
text-align: center;
}
h2 img {
display: inline;
height: 100px;
margin-left: 100px;
}
<body>
浏览 0提问于2016-09-30得票数 1
我有一个div，其中包含两个类型为text的输入元素以及它们之间的标签。它由用户定义一个间隔(如4- 5)。它们显示在同一行上。这三个控件的边距和填充都设置为0。Firebug证实了这一点。它们之间仍然有一些空间。怎么会这样呢？这个空间是从哪里来的？
浏览 1提问于2011-02-19得票数 0
回答已采纳
5回答
所以，我有一个容器潜水，其中包含两个div。
#main_container {
margin: 0 auto;
width: 980px;
padding: 0 0 0 0;
border: none;
}
.content_third {
display: inline-block;
width: 326px;
padding: 0 0 0 0;
border: none;
}
.content_two {
display: inline-block;
width: 653px;
vertical-align
浏览 0提问于2011-10-22得票数 0
回答已采纳
2回答
我在排列两个div时遇到了很多麻烦。一个是twitter时间线框，另一个是联系人输入框。现在它看起来像这样：
正文设置为1020px，HTML格式的页面如下：
<div class="half" id="contact-info">
<h3>Contact Us</h3>
<p>Feel free to ask us any questions, send us any opportunities or pitch us your winning idea. There are infinite ways to p
浏览 5提问于2015-02-09得票数 0
我试图显示三个div元素，它们从一个容器div元素的一个边缘均匀地分布到另一个边缘。
这是HTML代码。
<body>
<div id="container" width="50%">
<div>foo</div>
<div>bar</div>
<div>baz</div>
<div class="stretch"></div>
</div&g
浏览 5提问于2013-07-14得票数 5
回答已采纳
我在CSS问题上有点纠结：
我想要两个div使用"display: inline-block“水平对齐，但是当我向其中一个div添加文本时，对齐是关闭的。
有没有一种方法可以让两个div对齐而不使用浮点数？
这是我的标记：
<div class="box">
<p>Some text</p>
</div><!-- /box -->
<div class="box">
<!-- No text -->
</div><!-- /box --
浏览 0提问于2011-11-01得票数 6
回答已采纳
4回答
我在Firefox (在FF5/win，FF6/win，FF5/mac上测试)上遇到了一个问题，它比我测试过的任何其他浏览器都有更大的边际空间。(IE9/win、Chrome/win、Opera/win、Safari/win、Safari/mac)。
诚然，HTML是不同寻常的，我有5个表单，但我找不到任何文档问题的想法，或任何警告它。
代码如下：
HTML
<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 1
浏览 1提问于2011-08-18得票数 1
回答已采纳
3回答
我正在将div从float:left切换到inline-block，并且不知道为什么有些div会被替换，比如它们有一些不可见的边框或什么的。
以下是float:left 的报道
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
float:left;
margin:0 20px;
}
和inline-block 在一起
div{
background-color: red;
width: calc(25% - 40px);
height: 50px
浏览 1提问于2015-09-27得票数 2
回答已采纳
3回答
我正在编写一个样式表，希望在容器中水平显示三个元素(width=33%)，并具有相对布局。代码如下：
#container
{
margin:auto;
width:85%;
padding:0;
}
#element
{
display:inline-block;
width:33.3%;
margin-left:0;
margin-right:0;
border:0px;
text-align:center;
}
我不明白为什么有三个元素：
<div id="container
浏览 0提问于2011-05-02得票数 1
回答已采纳
我使用Hakyll生成一些文档，我注意到它在生成的代码中有一种奇怪的关闭HTML标记的方式。
有一个页面，他们说你必须像他们一样生成标记，否则你页面的布局在某些情况下会被破坏，但我现在找不到它。
我创建了一个小的测试页面(下面的代码)，它有一个红色的层和一个黄色的层，红色层具有“普通”HTML标记，黄色层具有类似于hakyll生成的标记。
我在Firefox中看不到这两个div之间的任何区别。
谁能解释他们说的是不是真的？
<html>
<body>
<!-- NORMAL STYLE -->
<div style="background: r
浏览 2提问于2010-10-09得票数 5
回答已采纳
我有这样的代码：
#footer-a {
width: 50%;
background: black;
display: inline-block;
}
#footer-b {
width: 50%;
background: blue;
display: inline-block;
text-align: center;
}
<div class="content-wrapc">
<p id="footer-a"> Footer </p>
<p id="footer-b&
浏览 0提问于2018-09-12得票数 2
回答已采纳
1回答
为什么我看到这两个导航元素在屏幕上显示的方式不同？从这个中可以看到，未格式化的nav在到达div末尾时没有正确包装，而是溢出到边框，而格式化标记的行为与我预期的一样。为什么HTML中的空白应该是没有意义的呢？
在链接之间没有断线：
<a href="/">Link 1</a><a href="/">Link 2</a><a href="/">Link 3</a><a href="/">Link 4</a><a href=&#
浏览 3提问于2016-07-19得票数 1
回答已采纳
2回答
我有一个.aspx页面，它有两个图像，它们都是页面的全部宽度。
问题是，在这两个图像之间存在着我不想要的空白。
<body>
<form id="form1" runat="server">
<div>
<img src="Images/NavBar.png"/>
<img src="Images/ImageHeader.png" />
</div>
</form>
如何删除空白？
我目前没有使用任何CSS，但如果需要的话会使用。
编辑这是解
浏览 2提问于2013-09-15得票数 1
回答已采纳
所以我的页面是一个基本的学校学生/班长。目前我有两个搜索栏，它们调用不同的API调用，它们都返回一个列表。唯一的问题是，当我显示我的结果时，结果之间有空格。另外，我遇到的另一个问题是，我的模式自动补全功能将结果隐藏在弹出窗口后面。 BOB | Math
TIM | Science
Sarah | ENGLISH 这是我的HTML <html>
<div class="card">
<div class="card-header">Search Name</div>
<div cl
浏览 15提问于2019-09-16得票数 0
我有菜单，用DIV-s隔开。当这个看起来像：
<div id="container">
<div>1</div><div>2</div><div>3</div>
</div>
它渲染得很好，但这不太好。但如果我这么做
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
输出中有
浏览 4提问于2013-12-16得票数 3
回答已采纳
5回答
我指的是我在上面找到的这个Fiddle，它使用display: inline-block;，我已经把它应用到了我自己的工作中，但是我不知道如何让这两个div并排坐着，而不是3-4 4px间隙？
我试过：
html
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</di
浏览 12提问于2013-10-01得票数 1
回答已采纳
我试图在另一个div中同样地使用text-align:justify来空间div。由于某种原因，如果html是缩进的，而不是其他的，它就能工作。不幸的是，我正在开发的应用程序常常使所有的html在一个大字符串中一起运行，所以我需要弄清楚如何运行。
下面是两个问题的代码笔的链接：
这是密码：
1-与数字2相同，但有所有的间距/压痕
<div class="equal-justify-wrapper">
<div>one</div>
<div>two</div>
<div>three</div
浏览 7提问于2013-10-07得票数 4
回答已采纳
例如，如果我们使用display: inline-block和margin-right: 20px来设置两个div元素的样式，那么当窗口框架调整到右边距时，第二个div元素会过早地跳到下一行。
有没有解决这个问题的简单方法？
浏览 0提问于2013-06-15得票数 0
回答已采纳
1回答
动态创建的元素失去间距
、、、
我有两个span元素的div a：
<div id="layout-workspace-name">
<span id="workspace-name">My workspace</span>
<span class="glyphicon glyphicon-pencil" style="color: white"></span>
</div>
否则，我有一个Jquery代码，当我点击‘#工作区-名称’时，它会替换‘#布局-工作区’的内容：
浏览 1提问于2017-08-19得票数 3
回答已采纳
我的页面上有两个输入元素。我需要在这两个元素之间留出余量。
<input type="text" class="form-control" placeholder="Username">
<input type="password" class="form-control" placeholder="password">
我已经创建了一个类，用于为密码输入分配边距。我想知道是否有更好的方法来做这件事？也许可以用div包装两个输入标记？
浏览 7提问于2016-10-19得票数 0
我有两个div，我想在另一个div中垂直居中。目前我有：
现在我明白这里是怎么回事了，但是我想让左边的div在容器中垂直对齐，右边的div也一样。但它们是成对垂直排列的，而不是单独的。我尝试了各种方法，但似乎都不能让它工作。
浏览 0提问于2011-04-14得票数 13
回答已采纳
4回答
我在一排中创建了两个容器，并希望它位于屏幕的中心，所以我为它使用了填充，但是它们更接近，我想在它们之间添加空间。这是输出的突然停止。
代码：
Padding(
padding: EdgeInsets.fromLTRB(40, 250, 30, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Flexible
浏览 0提问于2021-08-09得票数 1
回答已采纳
应该很简单，对吧？只需将外部包含div的填充设置为0，并将外部div内的两个并排的div设置为space :0，但这对两个水平div之间的空间没有任何影响。我需要的是红色轮廓的左侧div来接触绿色轮廓的右侧div。
尽管我努力使用填充和边距，但两个div之间的空间不会消失。
我已经在SO上看了很多答案，但到目前为止还没有人把它分解成这个简单的例子--我的小提琴显示了这个问题，在
下面是非常简单的代码：
<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%
浏览 0提问于2011-11-27得票数 8
回答已采纳
2回答
2 div之间的神秘空间
、、、
在进度条旁边有一组由两个按钮组成的按钮，其中的按钮是用<div>包装的。
<div class="block">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" style="width: 100%;"></div>
</div>
<div class="b
浏览 3提问于2014-06-05得票数 1
回答已采纳
2回答
html
<div id="home_header_minitab">
<img src="topnavi_1.gif" />
<img src="topnavi_2.gif" />
<img src="topnavi_3.gif" />
<img src="topnavi_4.gif" />
&
浏览 5提问于2013-12-04得票数 0
回答已采纳
2回答
我创建了一个php表单，其中我想验证表单，但是当我在datetime和textarea字段上附加class=validaterequired时，其他类就不适用了，我如何在这两个类上附加两个类呢?下面是我的代码：
<textarea name="message" class="validate[required] ckeditor" id="message" cols="90" rows="15" style="width: 100%;"><?= $_POST['messag
浏览 1提问于2014-02-12得票数 0
回答已采纳
1回答
我有一个普通的HTML页面，其中包含一些彼此之间有一点空白的框：
当用户向下滚动时，页面会通过AJAX自动加载更多的图像，并将更多的框附加到页面上，但它们会相互粘合在一起：
它们实际上有相同的HTML，它们不应该是那样的。这是直接随页而来的框的HTML：
<div class="images inner">
{% for image in S_IMAGES %}
<span class="image{% if loop.last %} last-box{% endif %}">
<div class=&#
浏览 4提问于2014-02-06得票数 1
回答已采纳
我知道很多技术可以将div并排定位.然而，我从来不明白为什么采取两个边框的宽度: 50%不会产生并排的div。根据我对css的理解，边距、填充边和边框超出等式，这是绝对可行的。
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.h
浏览 4提问于2015-09-24得票数 3
回答已采纳
我已经使用cli安装了一个vue项目，并配置了eslint和漂亮，但是漂亮做了我不想要的事情。我想在两个标签之间有一个|，但是当我保存prettier时，删除了标签和|之间的空格。我怎么才能解决这个问题。下面是代码:注意第二行中的|，以及前面的空格被prettier删除。
<div id="nav">
<router-link :to="{name: 'event-list'}">List</router-link>|
<router-link :to="{name: 'event
浏览 167提问于2020-05-23得票数 2
回答已采纳
2回答
我在布局中增加了两个标签：
Div container = new Div();
container.add(new Label(getTranslation(MessageConstants.SOME_DESCRIPTION)));
container.add(new Label(getTranslation(MessageConstants.MORE_DESCRIPTION_TEMPLATE, valueToAdd)));
add(container);
但这导致标签之间没有空格。这看起来很糟糕，请参见图像：
在不合并两个翻译标签的情况下，避免这种情况的最佳方法是什么？
浏览 8提问于2022-03-24得票数 0
回答已采纳
为
<myDIV id="myInput" contenteditable="true"></myDIV>
我想设置"abcdefg“后面的空间。
做这个
var myInputDIV = document.getElementById("myInput");
myInputDIV.innerHTML = "abcdefg "; //does not work
myInputDIV.textContent = "abcdefg "; //does not work
如何确保我得到后面
浏览 4提问于2017-01-13得票数 0
回答已采纳
我想在我的div之间添加一个空格。
我尝试添加1个div，然后使用CSS中的属性，如空白处、填充顶部等……我能在网上找到的所有其他东西。唯一能增加空格的是当我使用空白符-top:2000px或更多时...
这给了我一个可怕的巨大空间。div是空的，里面什么也没有。
谁能告诉我如何在两个div之间添加一些垂直空间？谢谢。
浏览 3提问于2013-05-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
