CSS అంతరాంతరం

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

పెడ్డింగ్ అటీబ్యూట్ సెట్టింగ్ లేదా తిరిగి ఇవ్వబడిన ఎలిమెంట్ పెడ్డింగ్ ను నిర్ణయిస్తుంది.

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

మార్జిన్ అటీబ్యూట్ మరియు padding లక్షణం అన్నింటికీ ఎలిమెంట్ చుట్టూ అంతరాన్ని ప్రవేశపెడతాయి. కానీ, మార్జిన్ బోర్డర్ చుట్టూ అంతరాన్ని ప్రవేశపెడుతుంది మరియు ప్యాడింగ్ ఎలిమెంట్ బోర్డర్ లోపల అంతరాన్ని ప్రవేశపెడుతుంది.

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

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

CSS పాఠ్యక్రమం:CSS ప్యాడింగ్ అట్రిబ్యూట్

CSS పరిశీలన పుస్తకం:padding లక్షణం

ఉదాహరణ

ఉదాహరణ 1

ప్రక్కల అంతరాంతరాలను అమర్చండి:

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

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

ఉదాహరణ 2

<div> అంతరాంతరాలను అన్ని నాలుగు ప్రక్కలను "25px"గా మార్చండి:

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

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

ఉదాహరణ 3

వారు అందించే విధం: <div> అంతరాంతరాలు:

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

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

ఉదాహరణ 4

margin లక్షణం మరియు padding లక్షణం మధ్య తేడా:

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

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

సింథాక్స్

padding లక్షణాన్ని అందించండి:

object.style.padding

padding లక్షణాన్ని అమర్చండి:

object.style.padding = "%|length|initial|inherit"

లక్షణ విలువ

విలువ వివరణ
% ప్రాణి అంతరాంతరాలను నిర్వచించండి。
length పొడవు యూనిట్లతో అంతరాంతరాలను నిర్వచించండి。
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. చూడండి initial。
inherit తన మూల అంశం నుండి ఈ లక్షణాన్ని పారదర్శకంగా ఉంచండి. చూడండి inherit。

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

అప్రమేయ విలువ: 0
వారు అందించే విధం: పదబంధం，ద్వారా అంతరాంతరాలను ప్రస్తావిస్తుంది。
CSS వెర్షన్: CSS1

బ్రౌజర్ మద్దతు

క్రోమ్ Edge Firefox Safari Opera
క్రోమ్ Edge Firefox Safari Opera
支持 支持 支持 支持 支持