About

Breaking

Monday 22 May 2017

CSS Layout Box Model Tutorial


In this page contain CSS layout box model give you layout knowledge of element content and how to set padding, margin or border.
CSS layout allow you to set border around padding and set margin around content to better manage.
इस पेज में सीएसएस लेआउट बॉक्स मॉडल में आपको तत्व सामग्री का लेआउट ज्ञान और पैडिंग, मार्जिन या सीमा सेट करने के तरीके शामिल हैं।
सीएसएस लेआउट आपको पैडिंग के चारों ओर की सीमा निर्धारित करने और बेहतर प्रबंधन के लिए मार्जिन सेट करने की अनुमति देता है।

इस पेज में सीएसएस लेआउट बॉक्स मॉडल में आपको तत्व सामग्री का लेआउट ज्ञान और पैडिंग, मार्जिन या सीमा सेट करने के तरीके शामिल हैं।
सीएसएस लेआउट आपको पैडिंग के चारों ओर की सीमा निर्धारित करने और बेहतर प्रबंधन के लिए मार्जिन सेट करने की अनुमति देता है।

You can check this layout model for any element within webpage by this way:
  1. In your browser (Google chrome, Mozilla firefox), right click on webpage
  2. Select Inspect Element
  3. Select Box Model (firefox) and Matrics (chrome)
  4. Mouse hover on layout model to know area information.

Margin

Margin are border outside area. So margin is not support any special CSS properties exclude margin group properties It is use to leave a blank space around element content.

Border

Border are define the border around element content. It is use to display border outside content(like text, images and so forth).

Padding

Padding define the content or border in this two part middle part are call padding. It is use to leave blank space between content or border.

Width or Height of Elements

You can specify width or hight either absolute or relative value.

Total width count by this way,
Total width = width + left padding + right padding + left border + right border + left margin + right margin

Total Height count by this way,
Total Height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

हाशिया
मार्जिन सीमा के बाहर क्षेत्र हैं तो मार्जिन किसी भी विशेष सीएसएस संपत्तियों का समर्थन नहीं करता है, मार्जिन समूह गुणों को बाहर करता है यह तत्व सामग्री के चारों ओर रिक्त स्थान को छोड़ने के लिए उपयोग होता है

सीमा
सीमा तत्व सामग्री के चारों ओर सीमा परिभाषित कर रहे हैं यह सामग्री के बाहर सीमा (जैसे पाठ, चित्र और आगे) प्रदर्शित करने के लिए उपयोग की जाती है।

गद्दी
पैडिंग इस दो भाग के मध्य भाग में सामग्री या सीमा को परिभाषित करता है, कॉल पैडिंग है। यह सामग्री या सीमा के बीच रिक्त स्थान को छोड़ने के लिए उपयोग किया जाता है।

चौड़ाई या तत्वों की ऊंचाई
आप चौड़ाई या हाइट या तो पूर्ण या रिश्तेदार मान निर्दिष्ट कर सकते हैं।

इस तरह से कुल चौड़ाई की गणना,
कुल चौड़ाई = चौड़ाई + बाएं पैडिंग + सही पैडिंग + बाएं सीमा + सही सीमा + बाएं मार्जिन + दायां हाशिया

इस तरह से कुल ऊंचाई की गणना,
कुल ऊंचाई = ऊंचाई + ऊपर पैडिंग + नीचे पैडिंग + शीर्ष सीमा + नीचे की सीमा + शीर्ष मार्जिन + नीचे मार्जिन

No comments:

Post a Comment