Margin
Margin అంటే ఏమిటి?
Margin అనేది ఒక HTML element యొక్క border బయట ఉండే ఖాళీ. ఇది element ను ఇతర elements నుండి దూరంగా ఉంచడానికి ఉపయోగించబడుతుంది.
CSS Box Model లో బయట నుంచి లోపలికి సాధారణ క్రమం: Margin, Border, Padding, Content. Margin element యొక్క background color లో భాగం కాదు. ఇది element చుట్టూ బయట ఖాళీని సృష్టిస్తుంది.
Margin ఎందుకు ఉపయోగించాలి?
- రెండు boxes మధ్య దూరం పెంచడానికి.
- Heading మరియు paragraph మధ్య ఖాళీ ఇవ్వడానికి.
- Card ను page అంచుల నుంచి దూరంగా ఉంచడానికి.
- Content ను సులభంగా చదవగలిగేలా spacing ఇవ్వడానికి.
Margin రాయే విధానం
ఉదాహరణకు, margin: 20px; అంటే element యొక్క నాలుగు వైపులా 20 pixels బయట ఖాళీ ఉంటుంది.
margin-topపై వైపు ఖాళీని నియంత్రిస్తుంది.margin-rightకుడి వైపు ఖాళీని నియంత్రిస్తుంది.margin-bottomకింది వైపు ఖాళీని నియంత్రిస్తుంది.margin-leftఎడమ వైపు ఖాళీని నియంత్రిస్తుంది.
ఒక్క declaration లో నాలుగు values కూడా ఇవ్వవచ్చు: margin: 10px 20px 30px 40px;. ఇవి వరుసగా top, right, bottom, left ను సూచిస్తాయి.
margin: 10px 20px; అంటే పైకి మరియు కిందికి 10px, ఎడమకు మరియు కుడికి 20px. margin: 10px 20px 30px; అంటే top 10px, left మరియు right 20px, bottom 30px.
Margin మరియు Padding మధ్య తేడా
Margin border బయట ఖాళీని ఇస్తుంది. Padding border లోపల content చుట్టూ ఖాళీని ఇస్తుంది. Margin రెండు elements మధ్య దూరాన్ని మార్చుతుంది; Padding element లోని content మరియు border మధ్య దూరాన్ని మార్చుతుంది.
Margin విలువలకు సాధారణంగా px, em, rem లేదా percentage units ఉపయోగించవచ్చు. ఈ lesson లో సులభంగా అర్థం చేసుకోవడానికి px ఉపయోగిస్తున్నాం.
Simple Explanation
ఒక box చుట్టూ బయట ఖాళీ కావాలంటే margin ఉపయోగించండి. ఉదాహరణకు, margin: 24px; ఇస్తే ఆ box చుట్టూ నాలుగు వైపులా 24px ఖాళీ వస్తుంది.
Margin వల్ల box లోపల text మారదు; box మరియు దాని చుట్టూ ఉన్న ప్రాంతం మధ్య దూరం మాత్రమే మారుతుంది.
Real-Life Example
ఒక గదిలో రెండు కుర్చీలు ఉన్నాయని ఊహించండి. ప్రతి కుర్చీ మధ్య కొంత ఖాళీ ఉంటే నడవడం సులభంగా ఉంటుంది. అదే విధంగా వెబ్ పేజీలో రెండు cards మధ్య ఖాళీ ఇవ్వడానికి margin ఉపయోగిస్తాం.
Code Examples
Card చుట్టూ Margin ఇవ్వడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin Example</title>
<style>
body {
margin: 0;
background-color: #eef4ff;
font-family: Arial, sans-serif;
}
.card {
width: 260px;
padding: 20px;
border: 2px solid #2457a6;
margin: 30px;
background-color: white;
}
.card h2 {
margin-top: 0;
color: #2457a6;
}
</style>
</head>
<body>
<section class="card">
<h2>Student Card</h2>
<p>This card has space outside its border.</p>
</section>
</body>
</html>.card element కు margin: 30px; ఇచ్చాం. అందువల్ల card border బయట నాలుగు వైపులా 30px ఖాళీ ఉంటుంది. padding: 20px; మాత్రం card లోపల text మరియు border మధ్య ఖాళీని ఇస్తుంది. ఈ తేడాను browser లో స్పష్టంగా చూడవచ్చు.
లేత నీలం background పై తెల్లటి Student Card కనిపిస్తుంది. Card కు నీలం border ఉంటుంది మరియు page అంచుల నుంచి నాలుగు వైపులా సుమారు 30px బయట ఖాళీ ఉంటుంది. Card లోపల heading మరియు paragraph కనిపిస్తాయి.
Line-by-Line Explanation
ఇది page లోని body element కు styles ప్రారంభమయ్యాయని సూచిస్తుంది.
Browser body కి సాధారణంగా ఇచ్చే default margin ను తొలగిస్తుంది. అందువల్ల page background అంచు నుంచి ప్రారంభమవుతుంది.
card class ఉన్న element కు styles ఇవ్వడానికి ఈ selector ఉపయోగించబడింది.
Card యొక్క content width ను 260px గా ఉంచుతుంది.
Card లోపల content మరియు border మధ్య 20px ఖాళీ ఇస్తుంది. ఇది margin కాదు; ఇది padding.
Card చుట్టూ 2px మందంతో solid border సృష్టిస్తుంది. Margin ఈ border బయట కనిపించే ఖాళీని నియంత్రిస్తుంది.
Card యొక్క నాలుగు వైపులా border బయట 30px ఖాళీ ఇస్తుంది. దాంతో card page అంచుల నుంచి దూరంగా ఉంటుంది.
Card లోపలి ప్రాంతానికి తెలుపు background ఇస్తుంది. Margin ప్రాంతం మాత్రం card background లో భాగం కాదు.
card లోని h2 heading ను ఎంచుకునే descendant selector ఇది.
Heading పై భాగంలో ఉండే default margin ను తొలగిస్తుంది. అందువల్ల heading padding ప్రారంభానికి దగ్గరగా కనిపిస్తుంది.
ఈ HTML element కు card class వర్తిస్తుంది. అందువల్ల దీనిపై .card లోని width, padding, border మరియు margin styles అమలవుతాయి.
Student Card
Card లో heading చూపిస్తుంది. ఇది .card h2 selector ద్వారా నీలం రంగులో కనిపిస్తుంది.
This card has space outside its border.
Card లోని paragraph text ను చూపిస్తుంది. Card బయట ఉన్న ఖాళీని margin సృష్టిస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Try CSS Margin</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.box {
width: 220px;
padding: 15px;
border: 2px solid #333333;
margin: 20px;
background-color: white;
}
</style>
</head>
<body>
<div class="box">Change my margin.</div>
</body>
</html>Practice
Practice: పై code లో notice box page అంచుల నుంచి మరియు ఇతర elements నుంచి దూరంగా కనిపించేలా నాలుగు వైపులా 25px margin ఇవ్వండి.
Hint: .notice rule లో margin: 25px; declaration ను add చేయండి.
Practice: Margin ను మార్చి 50px చేయండి. Browser లో box position ఎలా మారుతుందో గమనించండి.
Hint: margin: 25px; లోని value ను 50px గా మార్చండి.
Common Mistakes
marging లేదా margine అని property పేరు తప్పుగా రాస్తాడు.సరైన property పేరు
margin. CSS property పేర్ల spelling ను జాగ్రత్తగా రాయండి.
margin: 20; అని unit లేకుండా value ఇస్తాడు.సాధారణ length value కు
px వంటి unit ఇవ్వండి: margin: 20px;. Zero value కి మాత్రం unit అవసరం లేదు.
Box బయట ఖాళీ కోసం
margin, content మరియు border మధ్య లోపలి ఖాళీ కోసం padding ఉపయోగించాలి.
margin: 10px 20px 30px 40px; values ఏ వైపులకు వర్తిస్తాయో తప్పుగా అర్థం చేసుకుంటాడు.నాలుగు values క్రమం top, right, bottom, left. దీన్ని clockwise order గా గుర్తుంచుకోండి.
Interview Questions
CSS లో Margin అంటే ఏమిటి?
Answer: Margin అనేది element యొక్క border బయట ఉండే ఖాళీ. ఇది element ను ఇతర elements లేదా page అంచుల నుంచి దూరంగా ఉంచుతుంది.
Margin మరియు Padding మధ్య తేడా ఏమిటి?
Answer: Margin border బయట ఖాళీని ఇస్తుంది. Padding border లోపల content చుట్టూ ఖాళీని ఇస్తుంది.
margin: 20px; అంటే ఏమిటి?
Answer: Element యొక్క top, right, bottom మరియు left నాలుగు వైపులా 20px margin ఇవ్వబడుతుంది.
Margin కు నాలుగు values ఇచ్చినప్పుడు వాటి క్రమం ఏమిటి?
Answer: క్రమం top, right, bottom, left. ఉదాహరణకు margin: 10px 20px 30px 40px;.
Exam Questions
కింది code లో box బయట అన్ని వైపులా 15px ఖాళీ ఇవ్వడానికి సరైన declaration ఏది?
Answer:
margin: 15px;
కింది వాటిలో border లోపల content కు ఖాళీ ఇచ్చేది ఏది: margin లేదా padding?
Answer:
Padding.
margin-top property ఏ ఖాళీని నియంత్రిస్తుంది?
Answer:
Element border పైభాగం బయట ఉండే ఖాళీని నియంత్రిస్తుంది.
margin: 10px 20px; లో top మరియు bottom values ఏమిటి?
Answer:
Top మరియు bottom కు 10px, left మరియు right కు 20px.
Quick Revision
- Margin అనేది element border బయట ఉండే ఖాళీ.
margin: 20px;నాలుగు వైపులా 20px ఖాళీ ఇస్తుంది.margin-top,margin-right,margin-bottom,margin-leftద్వారా ఒక్కో వైపు నియంత్రించవచ్చు.- నాలుగు margin values క్రమం top, right, bottom, left.
- Margin బయట spacing కోసం; padding లోపలి spacing కోసం.
- Margin element యొక్క background color లో భాగం కాదు.