CSS ਵਿੱਚ, ਇਹ Box Model ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਸੰਕਲਪ ਹੈ ਕਿ ਇੱਕ ਤੱਤ ਕਿਵੇਂ ਬਣਤਰ ਹੈ ਅਤੇ ਇੱਕ ਵੈਬਪੇਜ 'ਤੇ ਸਥਿਤੀ ਹੈ। ਇਸ ਵਿੱਚ ਬੁਨਿਆਦੀ ਹਿੱਸੇ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਸਮੱਗਰੀ, Padding, Border ਅਤੇ Margin.
Content
Content ਉਹ ਖੇਤਰ ਹੈ ਜਿਸ ਵਿੱਚ ਤੱਤ ਦੀ ਅਸਲ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਟੈਕਸਟ, ਚਿੱਤਰ ਜਾਂ ਵੀਡੀਓ।
ਸਮੱਗਰੀ ਦੇ ਆਕਾਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਅਸੀਂ width ਅਤੇ height ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
Padding
Padding ਸਮੱਗਰੀ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੀ ਜਗ੍ਹਾ ਹੈ, ਸਮੱਗਰੀ ਅਤੇ ਤੱਤ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪਾੜਾ ਬਣਾਉਂਦਾ ਹੈ border ।
ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ padding, ਅਸੀਂ padding-top, padding-right,padding-bottom ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। padding-left
Border
ਇਹ Border ਤੱਤ ਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਰੂਪਰੇਖਾ ਹੈ, ਸਮੱਗਰੀ ਅਤੇ ਆਲੇ ਦੁਆਲੇ ਦੇ ਖੇਤਰ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਪਸ਼ਟ ਸੀਮਾ ਬਣਾਉਂਦਾ ਹੈ।
ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਲਈ border, ਅਸੀਂ border-width, border-style, ਅਤੇ border-color ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।
Margin
Margin ਤੱਤ ਦੇ ਬਾਹਰ ਸਪੇਸ ਹੈ border, ਦੂਜੇ ਤੱਤਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪਾੜਾ ਬਣਾਉਂਦਾ ਹੈ।
ਮੁੱਲਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ margin, ਅਸੀਂ margin-top, margin-right, ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। margin-bottom margin-left
in CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ Box Model, ਅਸੀਂ ਕਿਸੇ ਤੱਤ ਦੇ ਭਾਗਾਂ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸੋਧ ਕੇ ਉਸ ਦੇ ਆਕਾਰ ਅਤੇ ਸਥਿਤੀ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹਾਂ।
ਉਦਾਹਰਨ:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਕਲਾਸ ਵਾਲੇ ਤੱਤ .box ਦੀ ਚੌੜਾਈ 200px ਅਤੇ 100px ਦੀ ਉਚਾਈ ਹੈ। ਇਸ ਵਿੱਚ 20px, 1px ਦੀ ਮੋਟਾਈ ਵਾਲਾ padding ਇੱਕ ਕਾਲਾ, ਅਤੇ ਇੱਕ 10px ਹੈ । border margin
ਇਹਨਾਂ ਮੁੱਲਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਕੇ, ਤੁਸੀਂ ਆਪਣੇ ਵੈਬਪੇਜ 'ਤੇ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਅਤੇ ਸਪੇਸਿੰਗ ਵਾਲੇ ਤੱਤ ਬਣਾ ਸਕਦੇ ਹੋ। ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ Box Model, ਤੁਹਾਡੇ ਕੋਲ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਦੇ ਅੰਦਰ ਤੱਤਾਂ ਦੀ ਸਥਿਤੀ, ਆਕਾਰ ਅਤੇ ਸਪੇਸਿੰਗ 'ਤੇ ਨਿਯੰਤਰਣ ਹੈ।