div를 추가 할 때 CSS 여백에 문제가 있습니다. Create Div 버튼 사이의 여백은 크지 만 Example Text Here 사이의 여백은 작게하고 싶습니다.
JS :
document.getElementById("createTask").addEventListener("click", myFunction);
function myFunction() {
var div = document.createElement('div');
div.innerHTML = "Example Text Here Example Text Here";
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
}
CSS :
div {
border-top: 20px;
margin-left: 200px;
margin-top: 20px;
width: 950px;
padding: 10px;
word-spacing: 110px
}
h1 {
margin-top: 200px;
}
Create Div 버튼과 Example Text Here 사이에 여백이 좋지만 Example Text Here와 다른 Example Text Here 사이에 여백이 너무 큽니다.
JS :
document.getElementById("createTask").addEventListener("click", myFunction);
function myFunction() {
var div = document.createElement('div');
div.innerHTML = "Example Text Here Example Text Here";
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
}
CSS :
div {
border-top: 170px solid transparent;
margin-left: 200px;
margin-top: 20px;
width: 950px;
padding: 10px;
word-spacing: 110px
}
h1 {
margin-top: 200px;
}
Create Div 버튼과 Example Text Here 사이의 여백이 이와 같기를 원하지만, 예제 텍스트 (div 만들기 버튼을 여러 번 눌렀을 때) 사이의 여백이 그렇게 크지 않기를 바랍니다 : https : //jsfiddle.net/stackquestion2021/y0dm2jao/3/
Create Div 및 Example Text Here 여백을 더 크게 만들고 싶지만 Example Text Here 여백과 다른 Example Text Here 's 여백은 완벽합니다. https://jsfiddle.net/stackquestion2021/e5nvdh4p/5/
나는 당신이 나머지 html을 어떻게 구조화했는지에 달려 있습니다. 이것이 당신이 간 것이라면 margin-bottom버튼에 넣을 수 있습니다 . 두 개의 버튼을 나란히 배치하도록 구조를 변경 한 경우 div로 감싸고 거기에 여백을 추가합니다 (예제도 있습니다).
일반적으로 CSS를 수행하면 한 방향으로 여백을 수행하는 것이 더 좋습니다. 그래서 당신은 margin-bottom또는 margin-top, 나는 그것이 margin-bottom나를 위해 더 나은 흐름을 수행합니다 .
document.getElementById("createDiv").addEventListener("click", myFunction);
function myFunction() {
var div = document.createElement('div');
div.innerHTML = "Example Text Here Example Text Here";
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
}div {
margin-left: 200px;
margin-top: 20px;
width: 950px;
padding: 10px;
word-spacing: 110px
}
h1 {
margin-top: 200px;
}
.button {
border: 3px;
border-style: solid;
border-color: #1E5096;
padding: 1em;
margin-bottom: 170px;
}<button id="createDiv" class="button">Create Div</button>document.getElementById("createDiv").addEventListener("click", myFunction);
function myFunction() {
var div = document.createElement('div');
div.innerHTML = "Example Text Here Example Text Here";
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
}div {
margin-left: 200px;
margin-top: 20px;
width: 950px;
padding: 10px;
word-spacing: 110px
}
h1 {
margin-top: 200px;
}
.action-wrapper {
display: flex;
align-items: center;
margin-bottom: 170px;
}
.button {
border: 3px;
border-style: solid;
border-color: #1E5096;
padding: 1em;
}<div class="action-wrapper">
<button id="createDiv" class="button">Create Div</button> <button class="button">Placeholder</button>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다