స్టైల్ మార్జిన్ అంశం

నిర్వహణ మరియు ఉపయోగం

margin ఈ అంశం సెలెక్టర్ పైని పొరపెట్టును అంగీకరించడానికి లేదా తిరిగి ఇవ్వడానికి ఉపయోగిస్తారు.

ఈ అంశం ఒకటి నుండి నాలుగు విలువలను అంగీకరిస్తుంది:

  • ఒక విలువ, ఉదా: div {margin: 50px} - ప్రతి నాలుగు పొరపెట్టు 50px
  • రెండు విలువలు, ఉదా: div {margin: 50px 10px} - పైపు మరియు తక్కువపు పొరపెట్టు 50px, కుడిపు మరియు ఎడమపు పొరపెట్టు 10px
  • మూడు విలువలు, ఉదా: div {margin: 50px 10px 20px} - పైప్రక్కముగల పొరపెట్టు 50px, కుడిప్రక్కముగల పొరపెట్టు 10px, తక్కువప్రక్కముగల పొరపెట్టు 20px
  • నాలుగు విలువలు, ఉదాహరణకు: div {margin: 50px 10px 20px 30px} - పై మొత్తం అంచు 50px, కుడి మొత్తం అంచు 10px, క్రింద మొత్తం అంచు 20px, ఎడమ మొత్తం అంచు 30px

మొత్తం అంచు గుణము మరియు ప్యాడింగ్ గుణము మూలకు చుట్టూ అంతరాలను పెట్టడానికి ఉపయోగిస్తాయి. అయితే, వాటి వ్యత్యాసం లో, మొత్తం అంచు గుణము కింది అంచుల చుట్టూ అంతరాలను పెట్టడానికి ఉపయోగిస్తాయి, ప్యాడింగ్ గుణము పిత అంచుల లోపల అంతరాలను పెట్టడానికి ఉపయోగిస్తాయి.

మరియు చూడండి:

CSS శిక్షణ పాఠ్యక్రమం:CSS బాహ్యాంతరం

CSS పరిశీలన పాఠ్యక్రమం:మొత్తం అంచు గుణము

ప్రతిపాదన

ఉదాహరణ 1

వాటి మొత్తం అంచులను సెట్ చేయండి:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

వాటి మొత్తం అంచులను "25px"గా మార్చండి:

document.getElementById("myDiv").style.margin = "25px";

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

వాటి మొత్తం అంచులను తిరిగి పొందండి:

alert(document.getElementById("myDiv").style.margin);

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

మొత్తం అంచు గుణము మరియు ప్యాడింగ్ గుణము యొక్క వ్యత్యాసం:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

స్వయంగా ప్రయత్నించండి

సింటాక్స్

మొత్తం అంచు గుణమును తిరిగి పొందండి:

object.style.margin

మొత్తం అంచు గుణమును సెట్ చేయండి:

object.style.margin = "%|length|auto|initial|inherit"

గుణము విలువ

విలువ వివరణ
% పిత మూలకు వెలుపలి పొడవును నిర్వచిస్తుంది.
length పొడవు ఇక్కడ మొత్తం అంచులను నిర్వచిస్తుంది.
auto బ్రాజర్లు వెలుపలి మొత్తం అంచులను (నాలుగు అంచులు సమానంగా) సెట్ చేస్తాయి.
initial ఈ గుణమును మూల విలువకు సెట్ చేస్తుంది. చూడండి: initial.
inherit తన ముంది కింది మూలకు ఈ గుణమును సమర్పిస్తుంది. చూడండి: inherit.

సాంకేతిక వివరాలు

మూల విలువ 0
వాటి అనునది ప్రతిపాదిస్తుంది: సారిస్తున్న వినియోగదారు కింది మొత్తం అంచులు ప్రతిపాదిస్తుంది.
CSS 版本： CSS1

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持