Używam JavaScript, aby wstawić akapity w Div. Co to robi, otrzymuje wartość formularza wejściowego po kliknięciu przycisku i dołącz ją do określonego div jako akapit. Problem polega na tym, że ich margines jest zbyt duży i nie mam pojęcia, jak je zmniejszyć (uczynić je bliższe). Co mam zrobić w tym przypadku?

JSFiddle - W każdym razie mój kod wygląda tak:

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);
}
1
wessy 12 sierpień 2014, 13:26

5 odpowiedzi

Najlepsza odpowiedź

Wystarczy dodać następującą klasę w CSS.

 #blue p{margin:0;}

PRÓBNY

0
Suresh Ponnukalai 12 sierpień 2014, 09:28

Możesz zmodyfikować marżę z CSS.

#blue p{
  margin:0;
}
1
Llewellyn Collins 12 sierpień 2014, 09:29

Wystarczy zastosować CSS

#blue p {
     margin: 5px;
  }

Lub jakikolwiek inny numer zamiast 5 chcesz dodać

0
Shah Rukh 12 sierpień 2014, 09:29

Możesz po prostu dodać coś takiego do CSS:

#blue p {
  margin: 2px auto;
}

Pozdrowienia

0
Michael Schneider 12 sierpień 2014, 09:29

Dodaj to w swoich CSS: Demo

p {
    line-height: normal;
    margin: 0;
}
0
G.L.P 12 sierpień 2014, 09:32