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;}
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