సిఎస్ఎస్ ఇన్సైడ్ మార్గం

ఈ ఎలమెంట్‌కు అంతరాంతరం 70px ఉంది.

సిఎస్ఎస్ ఇన్సైడ్ మార్గం

CSS padding నిర్వచించిన హెడ్జ్‌లో ఎలమెంట్ కంటెంట్‌కు చుట్టూ అంతరాంతరాలను సృష్టించే అంశం

CSS ద్వారా, మీరు పూర్తిగా అంతరాంతరాలను (పాదింగ్) నియంత్రించవచ్చు. ఎలమెంట్‌కు ప్రతి ప్రక్కకు (పై, కుడి, తక్కువ, ఎడమ) అంతరాంతరాలను అమర్చవచ్చు.

Padding - ప్రత్యేక ప్రక్క

CSS ప్రతి ఎలమెంట్‌కు ప్రతి ప్రక్కకు అంతరాంతరాలను నిర్దేశించడానికి కొన్ని అంశాలు కలిగి ఉంటుంది:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

అన్ని అంతరాంతరాల అంశాలు క్రింది విలువలను అమర్చవచ్చు:

  • length - px, pt, cm వంటి అంశాలలో అంతరాంతరాలను నిర్దేశించు
  • % - సంచిక ఎలమెంట్ వెడల్పు శాతంలో అంతరాంతరాలను నిర్దేశించు
  • inherit - తండ్రి ఎలమెంట్‌నుండి అంతరాంతరాలను పాటించాలని నిర్దేశించు

సూచన:మానించబడని విలువలు లేవు.

ఉదాహరణ

డివ్‌ ఎలమెంట్‌కు అన్ని నాలుగు ప్రక్కలకు వేరే అంతరాంతరాలను అమర్చండి:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

మీరే ప్రయత్నించండి

Padding - లఘువైన అంశం

కోడ్‌ను తగ్గించడానికి, అన్ని అంతరాంతరాల అంశాలను ఒక అంశంలో నిర్దేశించవచ్చు.

padding 属性是以下各内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的：

如果 padding 属性有四个值：

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • 下内边距是 75px
    • 左内边距是 100px

ఉదాహరణ

使用设置了四个值的 padding 简写属性：

div {
  padding: 25px 50px 75px 100px;
}

మీరే ప్రయత్నించండి

如果 padding 属性设置了三个值：

  • padding: 25px 50px 75px;
    • 上内边距是 25px
    • 右和左内边距是 50px
    • 下内边距是 75px

ఉదాహరణ

使用设置了三个值的 padding 简写属性：

div {
  padding: 25px 50px 75px;
}

మీరే ప్రయత్నించండి

如果 padding 属性设置了两个值：

  • padding: 25px 50px;
    • 上和下内边距是 25px
    • 右和左内边距是 50px

ఉదాహరణ

使用设置了两个值的 padding 简写属性：

div {
  padding: 25px 50px;
}

మీరే ప్రయత్నించండి

如果 padding 属性设置了一个值：

  • padding: 25px;
    • 所有四个内边距都是 25px

ఉదాహరణ

使用设置了一个值的 padding 简写属性：

div {
  padding: 25px;
}

మీరే ప్రయత్నించండి

内边距和元素宽度

CSS width వెడల్పు అంశం ద్వారా ఎలమెంట్ యొక్క కంటెంట్ రీజన్ యొక్క వెడల్పును నిర్దేశిస్తుంది. కంటెంట్ రీజన్ అనేది ఎలమెంట్ (బాక్స్ మోడల్) యొక్క అంతరిక్షం, బార్డర్ మరియు మార్గం లోపలి పార్శ్వం లో ఉంటుంది.

అందువలన, ఎలమెంట్ కు నిర్దేశించిన వెడల్పు ఉన్నప్పుడు, ఎలమెంట్ యొక్క అంతరిక్షం వెడల్పును అంతరిక్షం లోపలి పార్శ్వం లో జోడించడం జరుగుతుంది. ఈ ఫలితం తప్పనిసరిగా అనుకొన్న ఫలితం కాదు.

ఉదాహరణ

ఇక్కడ, <div> ఎలమెంట్ యొక్క వెడల్పు 300px గా ఉంటుంది. కానీ, <div> ఎలమెంట్ యొక్క వాస్తవ వెడల్పు 350px (300px + ఎడమ అంతరిక్షం 25px + కుడి అంతరిక్షం 25px) ఉంటుంది:

div {
  width: 300px;
  padding: 25px;
}

మీరే ప్రయత్నించండి

వెడల్పును 300px గా ఉంచడానికి మరియు పాడింగ్ యొక్క మొత్తాన్ని గాటి చేయడానికి ఉపయోగించడానికి ఆనుకొనుట చేస్తుంది: box-sizing ఈ అంశం ద్వారా ఎలమెంట్ యొక్క కంటెంట్ రీజన్ యొక్క వెడల్పును నిర్దేశిస్తుంది. కంటెంట్ రీజన్ అనేది ఎలమెంట్ (బాక్స్ మోడల్) యొక్క అంతరిక్షం, బార్డర్ మరియు మార్గం లోపలి పార్శ్వం లో ఉంటుంది.

ఉదాహరణ

box-sizing అంశం ద్వారా వెడల్పును 300px గా ఉంచడానికి మరియు పాడింగ్ యొక్క మొత్తాన్ని గాటి చేయడానికి ఉపయోగించండి:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

మీరే ప్రయత్నించండి

మరిన్ని ఉదాహరణలు

ఎడమ అంతరిక్షం ను సెట్ చేయండి
ఈ ఉదాహరణ లో ప్యారాగ్రాఫ్ ఎలమెంట్ యొక్క ఎడమ అంతరిక్షం ను సెట్ చేయడాన్ని చూపిస్తుంది.
కుడి అంతరిక్షం ను సెట్ చేయండి
ఈ ఉదాహరణ లో ప్యారాగ్రాఫ్ ఎలమెంట్ యొక్క కుడి అంతరిక్షం ను సెట్ చేయడాన్ని చూపిస్తుంది.
పై అంతరిక్షం ను సెట్ చేయండి
ఈ ఉదాహరణ లో ప్యారాగ్రాఫ్ ఎలమెంట్ యొక్క పై అంతరిక్షం ను సెట్ చేయడాన్ని చూపిస్తుంది.
క్రింద అంతరిక్షం ను సెట్ చేయండి
ఈ ఉదాహరణ లో ప్యారాగ్రాఫ్ ఎలమెంట్ యొక్క క్రింద అంతరిక్షం ను సెట్ చేయడాన్ని చూపిస్తుంది.

అన్ని CSS అంతరిక్షం అంశాలు

అంశం వివరణ
padding ఒక ప్రకటనలో అన్ని అంతరిక్ష స్పేస్ అంశాలను సెట్ చేయుటకు ఉపయోగించే లఘువైన అంశం.
padding-bottom సెట్ ఎలమెంట్ యొక్క క్రింద అంతరిక్షం ను అమర్చు.
padding-left సెట్ ఎలమెంట్ యొక్క ఎడమ అంతరిక్షం ను అమర్చు.
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

ఎక్స్టెండెడ్ రీడింగ్

బుక్ ఆఫ్ ది మెరిట్ గురించి:బాక్స్ మోడల్: CSS అంతర్గత ప్యాడింగ్