CSS：如何减少 div 中段落的边距？答案

【问题标题】：CSS: How to decrease the margin of my paragraphs inside a div?CSS：如何减少 div 中段落的边距？
【发布时间】：2014-10-05 07:28:20
【问题描述】：

我正在使用 javascript 在 div 中插入段落。它的作用是在您单击按钮并将其作为段落附加到特定 div 时获取输入表单的值。问题是它们的边距太大，我不知道如何减少它们（使它们更接近）。在这种情况下我该怎么办？

jsfiddle - 无论如何，我的代码如下所示：

HTML

<div id="red">
    <button id="bt_1" onclick="addParagraph()">Add</button>
    <form>
        <input id="box_top" type="text" placeholder="Spacing is too big  -->">
    </form>
</div>
<div id="blue">

 <!--Paragraphs that are being added here have their top and bottom margin too big, but I don't know how to fix it.-->
 <!--Type something in thet input form and keep clicking the add button to see what I mean.-->

 </div>

CSS

#blue {
    height:100px;
    width:250px;
    margin-top: 10px;
    float:left;
    position:relative;
    background-color:blue;
    overflow:auto;
}

#red {
    height:100px;
    width:250px;
    margin-top: 10px;
    float:left;
    position:relative;
    background-color:red
}

form {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    display: inline-block;
}

#bt_1 {
    margin-left:5px;
    height:35px;
    width:70px;
    margin-top: 25px;
    border-radius:5px;
}

JavaScript

function addParagraph() {
    var word = document.getElementById("box_top").value;

    var pMaker = document.createElement("p");
    var nodeMaker = document.createTextNode(word);
    pMaker.appendChild(nodeMaker);

    var blueDiv = document.getElementById("blue");
    blueDiv.appendChild(pMaker);
}

【问题讨论】：

@SureshPonnukalai 谢谢！我不相信我忽略了这么基本的东西，这让我有点头疼哈哈。感谢您清理它。 :)
感谢大家的回复，对我帮助很大。

标签： javascript html css margin appendchild

【解决方案1】：

只需在您的 css 中添加以下类。

 #blue p{margin:0;}

DEMO

【讨论】：

【解决方案2】：

您可以使用 css 修改边距。

#blue p{
  margin:0;
}

【讨论】：

【解决方案3】：

只需应用 css

#blue p {
     margin: 5px;
  }

或任何其他数字，而不是您要添加的 5

【讨论】：

【解决方案4】：

您可以简单地在 css 中添加类似这样的内容：

#blue p {
  margin: 2px auto;
}

问候

【讨论】：

【解决方案5】：

在你的 CSS 中添加这个：Demo

p {
    line-height: normal;
    margin: 0;
}

【讨论】：