CSS Box Model

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Re: CSS Box Model

Post by Admin on 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

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Box Model

Post by coetphbrth on 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!

coetphbrth
Newbie
Newbie

Posts : 1
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Admin on 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;
}

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Box Model

Post by Admin on 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?

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Box Model

Post by Lakura1997 on 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 .

Lakura1997
Newbie
Newbie

Posts : 1
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Admin on 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.

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Box Model

Post by SarahMae on Sat Oct 14, 2017 4:25 pm

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

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.

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

SarahMae
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by EzequielGo on 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 Smile

Thankyou Admin. Very Happy

EzequielGo
Master
Master

Posts : 13
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by EzequielGo on Sat Oct 14, 2017 4:31 pm

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

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.

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

EzequielGo
Master
Master

Posts : 13
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by EzequielGo on Sat Oct 14, 2017 4:37 pm

Admin wrote:
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?

I've search an example. I'm not sure if it is working try this one:

<!doctype html>
<html>
<head>
<style>
body {font:12px arial, helvetica, sans-serif;}
.marquee {
width:130px;
height:40px;
padding:5px;
background-color: yellowgreen;
border: 20px solid rgba(0,0,0,0.3);
white-space: nowrap;
overflow: hidden;

/* Safari and Chrome */
overflow-x:-webkit-marquee;
-webkit-marquee-direction: backwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: fast;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: infinite;

/* W3C */
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: fast;
marquee-play-count: infinite;
}
</style>
</head>
<body>

<div class="marquee">
<p>And today's weather will be... FINE!</p>
</div>

</body>
</html>

EzequielGo
Master
Master

Posts : 13
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Rtagudin on Sat Oct 14, 2017 6:13 pm

Is there any related css properties that we can use?

Rtagudin
Newbie
Newbie

Posts : 2
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Clyntt on Sat Oct 14, 2017 7:23 pm

Rtagudin wrote:Is there any related css properties that we can use?

There's a lot of CSS properties you can use. See W3schools.com Smile

Clyntt
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Clyntt on Sat Oct 14, 2017 7:25 pm

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

Cascading Style Sheets, commonly known as CSS, is an integral part of the modern web development process. It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design. Therefore CSS is important in creating a website Smile

Clyntt
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by SarahMae on Sat Oct 14, 2017 7:52 pm

JasonOmeter wrote: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>

Hi Jason! Can you make me a Box Model which is the content is my name Smile Sarah Mae. Thankyou in advance Very Happy

SarahMae
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Anne on Sat Oct 14, 2017 8:30 pm

There is a padding in CSS box model. What is Padding?

Anne
Master
Master

Posts : 8
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Clyntt on Sat Oct 14, 2017 8:34 pm

Anne wrote:There is a padding in CSS box model. What is Padding?

The CSS padding properties are used to generate space around content. Smile

Clyntt
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by EzequielGo on Sat Oct 14, 2017 8:36 pm

Clyntt wrote:
Anne wrote:There is a padding in CSS box model. What is Padding?

The CSS padding properties are used to generate space around content. Smile

CSS padding clears an area around the content inside the border of an element.

EzequielGo
Master
Master

Posts : 13
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Anne on Sat Oct 14, 2017 8:39 pm

EzequielGo wrote:
Clyntt wrote:
Anne wrote:There is a padding in CSS box model. What is Padding?

The CSS padding properties are used to generate space around content. Smile

CSS padding clears an area around the content inside the border of an element.

Thankyou Ezequiel and Clyntt Laughing

Anne
Master
Master

Posts : 8
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Box Model

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum