margin
Last updated
Was this helpful?
Last updated
Was this helpful?
โฉ โฉ margin
margin ็็นๆง๏ผ
margin
็ใ่ๆฏใๆฐธ้ ๆฏใ้ๆใ็ใ
ๅฆๆๆฏ inline
ๅ
็ด ๏ผmargin
็ใๅ็ดๆนๅๆฒๆๆๆใใ
ๅฏไฝฟ็จ px
, rem
... ็ญๅฎไฝ๏ผไนๅฏไปฅ่จญๅฎ auto
่ฎ็ถฒ้ ่ชๅ่จ็ฎใ
่ฅ่จญๅฎ %
๏ผๅไปฅใ็ถๅ
็ด ๅฏฌๅบฆใ็บๆบใ
ๅฏไปฅๆฏใใ๏ผๆญคๆไธๅๅๅกๅฏ่ฝๆ้็ใ
MDN โฉ โฉ
const {log} = console;
const control = $('#control');
const div3 = $('#div3');
const label = $('#label');
const calc = $('#calc');
// marginControl.oninput
control.addEventListener('input', (e) => {
let x = e.target.value;
let percent = x + '%';
label.textContent = 'marginTop: ' + percent;
calc.textContent = `${percent} x 200px = ${2*x}px`
div3.style.marginTop = percent;
});
// โญ๏ธ ่ชๅ่ทไธๆฌก 'oninput' event
control.dispatchEvent(new Event('input'));
/* --------------- helpers ----------------- */
// $ โญ๏ธ selector
function $(selector, parent = document){
return parent.querySelector(selector);
}
#div1 {
width: 200px;
border: 1px solid black;
}
#div2, #div3 {
height: 100px;
}
#div2 {
/* โญ๏ธ vertical & horizontal align */
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 0, 0, 0.3);
font-weight: bold;
}
#div3 {
margin-block-start: 10%;
background-color: rgba(0, 255, 21, 0.3);
}
<input type="range" id="control" min="-100" max="100" value="0">
<label for="marginControl" id="label"></label>
<p>
margin ่ฅ่จญๅฎ %๏ผๅไปฅใ็ถๅ
็ด ๅฏฌๅบฆใ็บๆบใ<br />
<span id="calc"></span>
</p>
<div id="div1">
<div id="div2">
<p>200 x 100</p>
</div>
<div id="div3"></div>
</div>
/*
use adjacent sibling combinator (+)
to apply a margin between buttons.
*/
.button + .button {
margin-block-start: 0.5em;
}