<< Previous

CSS Box Model

css లోని ప్రతీ మూలకానికి (element) గల padding , border మరియు margin ఈ మూడింటి స్థితులను గమనించినట్లయితే దాన్ని ఒక "box model" గా ఊహించవచ్చు. ఈ విషయాన్ని క్రింది పటం ద్వారా సులువుగా అర్థం చేసుకోవచ్చు. ఒక వెబ్ పేజ్ ని design చెయ్యటానికి వీటిపై పూర్తి అవగాహన ఎంతైనా అవసరం ఉంది.

Box model

ఇందులో Content అనగా text గానీ images లాంటివి అన్నీ అవుతాయి. వీటి చుట్టూ గల ప్రదేశాన్ని clear చేసేది Padding. ఇది కనబడదు కానీ Content కు Background కలర్ (white తప్ప) ని apply చేసినప్పడు Padding ని కూడా చూడవచ్చును. ఇది Content యొక్క background వరకు లోపలివైపు వ్యాపించి ఉంటుంది. Background అనగా Content యొక్క Padding తరువాత వెంటనే గల ప్రదేశం అని అర్థం చేసుకోవచ్చు. Margin అనగా Content యొక్క Background కు బయటివైపు గల ప్రదేశాన్ని clear చేసేది. ఇది పూర్తిగా పారదర్శకంగా ఉంటుంది. అనగా Padding వలె కాకుండా Content యొక్క Background కలర్ ను మార్చినా కూడా Margin మాత్రం బయటకు కనబడదు.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div { margin : 25px ;
border : 25px solid #626200;
padding : 25px;
width:210px;height:55px;
background-color : #F2F2F2;}
</style>
</head>
<body>
<div>To design webpage or layouts we
must know about CSS Box Model</div>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

To design webpage or layouts we
must know about CSS Box Model

Width and Height of an Element

ఒక మూలకం యొక్క width (వెడల్పు) ను క్రింది విధంగా calculate చేస్తారు. పై ఉదాహరణను తీసుకుంటే
210px (width)
+ 25px (padding right)
+ 25px (padding left)
+ 25px (border right)
+ 25px (border left)
+ 25px (margin right)
+ 25px (margin left)
= 360px అనేది పై ఉదాహరణలోని element యొక్క మొత్తం వెడల్పు అవుతుంది.
55px (height)+ 25px (padding top)+ 25px (padding bottom)+ 25px (border top)+ 25px (border bottom)+ 25px (margin top)+ 25px (margin bottom) = 205px అనేది పై ఉదాహరణలోని element యొక్క height అవుతుంది.


<< Previous
Back to Top