CSS Box Model

by **Admin** Wed Oct 11, 2017 12:46 pm

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

The image below illustrates the box model:

Explanation of the different parts:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

For any clarifications you can leave your comment below. Laughing

by jennielym Wed Oct 11, 2017 9:02 pm

is CSS is really important in creating a website? Very Happy

by **Admin** Thu Oct 12, 2017 3:01 pm

jennielym wrote:is CSS is really important in creating a website?

Yes of course! Smile

CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout.

by JasonOmeter Fri Oct 13, 2017 7:37 pm

Good Evening Ma'am Kayla,

How can i compute the max total width and height of this box model?

,,
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
,,

by **Admin** Fri Oct 13, 2017 7:39 pm

JasonOmeter wrote:Good Evening Ma'am Kayla,

How can i compute the max total width and height of this box model?

,,
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
,,

Hello Jason! In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

For example: Assume we want to style a <div> element to have a total width of 350px:

Here is the computation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

by JasonOmeter Fri Oct 13, 2017 8:00 pm

I have a question ma'am, what property if i want to have a margin of 100px top and 50px bottom, what should property i use? with a single declaration only.
And what are those individual property for margin.
tnx maam Smile

by **Admin** Fri Oct 13, 2017 8:07 pm

JasonOmeter wrote:I have a question ma'am, what property if i want to have a margin of 100px top and 50px bottom, what should property i use? with a single declaration only.
And what are those individual property for margin.
tnx maam

There's a CSS topic about margin. According to my research, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties like, margin-top, margin-right,
margin-bottom and margin-left.

Here is the example:

p {
margin: 100px 150px 100px 80px;
}

by JasonOmeter Fri Oct 13, 2017 8:19 pm

Here's the output of what I've learned about the topic CSS Box Model.
tnx maam! Smile

<!DOCTYPE html>
<html>
<head>
<style>

div {
height: 50px;
width: 500px;
border: 20px inset cyan;
padding-top:5px;
margin-left:350px;
margin-top:150px;
text-align:center;
}

</style>
</head>
<body>
<div><h3>
Box Model Example
</h3></div>

</body>
</html>

by **Admin** Fri Oct 13, 2017 8:24 pm

JasonOmeter wrote:Here's the output of what I've learned about the topic CSS Box Model.
tnx maam!
<!DOCTYPE html>
<html>
<head>
<style>

div {
height: 50px;
width: 500px;
border: 20px inset cyan;
padding-top:5px;
margin-left:350px;
margin-top:150px;
text-align:center;
}

</style>
</head>
<body>
<div><h3>
Box Model Example
</h3></div>

</body>
</html>

Wow! Thank you for sharing your work Jason. Smile

Feel free to share some of basic works in CSS especially in CSS Box Model Smile

by EzequielGo Sat Oct 14, 2017 2:00 pm

Admin wrote:
JasonOmeter wrote:Good Evening Ma'am Kayla,

How can i compute the max total width and height of this box model?

,,
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
,,

Hello Jason! In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

For example: Assume we want to style a <div> element to have a total width of 350px:

Here is the computation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Can you please elaborate this computation on how we can compute box model?

by Clyntt Sat Oct 14, 2017 2:24 pm

How can I set the padding of the div to 25px?

by **Admin** Sat Oct 14, 2017 2:29 pm

EzequielGo wrote:
Admin wrote:
JasonOmeter wrote:Good Evening Ma'am Kayla,

How can i compute the max total width and height of this box model?

,,
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
,,

Hello Jason! In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

For example: Assume we want to style a <div> element to have a total width of 350px:

Here is the computation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Can you please elaborate this computation on how we can compute box model?

Hmm, okay. Here is the explanation. The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

I hope it helps you a lot Smile

by coetphbrth Sat Oct 14, 2017 2:31 pm

hi maam kayla! I'm just wondering if you can apply the <marquee> on Css box model? and how? Thank you!

by **Admin** Sat Oct 14, 2017 2:35 pm

Clyntt wrote:How can I set the padding of the div to 25px?

Inside the div, assume you have background-color: blue, width: 200px and padding which is 25px. Here is the example:

div {
background-color: blue;
width: 200px;
padding: 25px;
}

by **Admin** Sat Oct 14, 2017 2:40 pm

coetphbrth wrote:hi maam kayla! I'm just wondering if you can apply the <marquee> on Css box model? and how? Thank you!

I guess the marquee effect is allowed but I don't know how to use it. Is there somebody here in the forum knows how to use the marquee effect in CSS Box Model?

by Lakura1997 Sat Oct 14, 2017 3:43 pm

Maam , what is the main function or main purpose of box model in css ? Please specify .

Thank you .

by **Admin** Sat Oct 14, 2017 4:13 pm

Lakura1997 wrote:Maam , what is the main function or main purpose of box model in css ? Please specify .

Thank you .

I must say CSS box model is the foundation of layout on the Web. Each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.

by SarahMae Sat Oct 14, 2017 4:25 pm

Admin wrote:
jennielym wrote:is CSS is really important in creating a website?

Yes of course! CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout.

If CSS properties are important what is the use of javascript? What's the difference between CSS and javascript?

by EzequielGo Sat Oct 14, 2017 4:29 pm

Admin wrote:
EzequielGo wrote:
Admin wrote:
JasonOmeter wrote:Good Evening Ma'am Kayla,

How can i compute the max total width and height of this box model?

,,
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
,,

Hello Jason! In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

For example: Assume we want to style a <div> element to have a total width of 350px:

Here is the computation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Can you please elaborate this computation on how we can compute box model?

Hmm, okay. Here is the explanation. The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

I hope it helps you a lot

Thankyou Admin. Very Happy

by EzequielGo Sat Oct 14, 2017 4:31 pm

SarahMae wrote:
Admin wrote:
jennielym wrote:is CSS is really important in creating a website?

Yes of course! CSS are an important way to control how your Web pages look. CSS can control the fonts, text, colors, backgrounds, margins, and layout.

If CSS properties are important what is the use of javascript? What's the difference between CSS and javascript?

Javascript is a programming language, while CSS is a style sheet language. CSS is a design language, it makes the HTML page look good, and javascript makes the page do good stuff. JS or javascript is a client-side programming language, not a design language. Laughing

by Sponsored content

CSS Box Model

CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model

Re: CSS Box Model