ማርጂን vs ፓዲንግ
በህዳግ እና በማንጠፍያው መካከል ያለው ልዩነት በሲኤስኤስ ውስጥ አስፈላጊ ገጽታ ነው ምክንያቱም ህዳግ እና ንጣፍ በተለያዩ እቃዎች መካከል ክፍተት ለመስጠት በCSS ውስጥ ጥቅም ላይ የሚውሉ ሁለት ጠቃሚ ፅንሰ ሀሳቦች ናቸው። ንጣፍ እና ህዳጎች ሊለዋወጡ የማይችሉ እና የተለያዩ ዓላማዎች ስላሏቸው በአግባቡ ጥቅም ላይ መዋል አለባቸው። መከለያው በይዘቱ እና በብሎክ ድንበር መካከል ያለው ክፍተት ነው። በሌላ በኩል ህዳግ ከብሎክ ድንበር ውጭ ያለው ቦታ ነው። ህዳግ ብሎኮችን ከአጎራባች ብሎኮች የሚለይ ሲሆን ሽፋኑ ድንበሩን ከይዘቱ ሲለይ።
ፓዲንግ ምንድን ነው?
በሲኤስኤስ (Cascading Style Sheets)፣ ንጣፍ ማለት በይዘቱ እና በድንበሩ መካከል ያለው ቦታ ነው።የማገጃውን ይዘት ከዳርቻው ይለያል. መከለያው ግልጽ ነው እና የንጥሉ ዳራ ምስል ወይም የጀርባ ቀለምም ያካትታል። የአንድ ኤለመንት ንጣፍ መጠን በሲኤስኤስ ኮድ ውስጥ "padding" የሚለውን ቃል በመጠቀም ይገለጻል. ለምሳሌ፣ ኮድ የሚከተለውን ይዘት ዙሪያ 25 ፒክስል ንጣፍ ለመጨመር ጥቅም ላይ ሊውል ይችላል።
div {
ስፋት፡ 300 ፒክስል፤
ቁመት፡ 300 ፒክስል፤
padding: 25px;
ድንበር፡25px ጠንካራ፤
}
አስፈላጊ ከሆነ፣ የተለያዩ የመጠቅለያ ዋጋዎች ለግራ፣ ቀኝ፣ ላይ እና ታች እንዲሁም ተለይተው ሊገለጹ ይችላሉ። የሚከተለው ኮድ ለእያንዳንዱ ጎን የተለያዩ የመጠቅለያ ዋጋዎችን ይገልጻል።
div {
ስፋት፡ 300 ፒክስል፤
ቁመት፡ 300 ፒክስል፤
padding-top: 25px;
ፓዲንግ-ታች፡ 35px፤
ፓዲንግ-ግራ፡ 5px፤
padding-ቀኝ፡ 10px፤
ድንበር፡25px ጠንካራ፤
}
ማርጂን ምንድን ነው?
በሲኤስኤስ (Cascading Style Sheets) ውስጥ፣ ህዳግ ከድንበሩ ውጭ ያለው ቦታ ነው። ብሎክን ከሌሎች ብሎኮች ይለያል። ህዳጉም ግልፅ ነው፣ ነገር ግን ከፓዲንግ ጋር ያለው ትልቅ ልዩነት ህዳጉ የጀርባ ምስሎችን ወይም በንጥሉ ላይ የተተገበሩ የጀርባ ቀለሞችን አለማካተቱ ነው። በሲኤስኤስ ውስጥ ያለው የኅዳግ መጠን “ህዳግ” የሚለውን ቃል በመጠቀም ይገለጻል። የሚከተለው ኮድ በዲቪ ብሎክ ዙሪያ 25px ህዳግ ተተግብሯል።
div {
ስፋት፡ 320px፤
ቁመት፡ 320 ፒክስል፤
ድንበር፡5 ፒክስል ጠንካራ፤
ህዳግ፡25px፤
}
የተለያዩ እሴቶች ለግድቡ የተለያዩ ጎኖችም ሊገለጹ ይችላሉ። የሚከተለው ኮድ ለእያንዳንዱ ጎን የተለያዩ የኅዳግ እሴቶችን ይተገበራል።
div {
ስፋት፡ 320px፤
ቁመት፡ 320 ፒክስል፤
ድንበር፡5 ፒክስል ጠንካራ፤
ህዳግ-ከላይ፡ 25px፤
ህዳግ-ታች፡ 35px፤
ህዳግ-ግራ፡ 5px፤
ህዳግ-ቀኝ፡ 10px፤
}
በማርጂን እና ፓዲንግ መካከል ያለው ልዩነት ምንድን ነው?
• ንጣፍ በድንበሩ እና በይዘቱ መካከል ያለ ክፍተት ሲሆን ህዳግ ደግሞ ከድንበሩ ውጭ ያለው ክፍተት ነው።
• ንጣፍ የብሎክን ይዘት ከድንበሩ ይለያል። ህዳጉ አንዱን ብሎክ ከሌላው ይለያል።
• ንጣፍ በይዘት ላይ የተተገበሩ የጀርባ ምስሎችን እና የጀርባ ቀለሞችን ያቀፈ ሲሆን ህዳጉ እንደዚህ አይነት ይዘት የለውም።
• የአጎራባች ብሎኮች ህዳጎች መደራረብ ሲችሉ መከለያው አይደራረብም።
ማጠቃለያ፡
Padding vs Margin
ፓዲንግ በብሎኬት ወሰን ውስጥ ድንበሩን ከይዘቱ የሚለይ ቦታ ነው። ህዳጉ ከድንበሩ ውጭ ያለው ክፍተት ሲሆን ይህም ብሎክን ከአጠገብ ብሎኮች የሚለይ ነው። ሌላው ልዩነት ደግሞ ህዳጉ በይዘቱ ዙሪያ የሚተገበሩትን የጀርባ ምስል እና የበስተጀርባ ቀለሞችን ያካተተ መሆኑ ነው። አንዳንድ ጊዜ አሳሹ ገጹን ሲያቀርብ የአጎራባች ብሎኮች ህዳጎች ሊደራረቡ ይችላሉ ነገር ግን ለመደብደብ እንደዚህ ያለ ነገር አይከሰትም።
