Marusya's School Notes

Design A Box Model

HTML file:	Displayed by browser:
<style> div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px; } </style> <body> <p>This is the <div> element created by the CSS declarations <br />shown in the stylesheet on the left:</p> <div> <p style="border-style:groove;">The margin is the transparent space outside and around the dark navy blue border. The background yellow color of the webpage shows through it. <br /><br />The border is not transparent, which is why it's the navy blue color assigned to it. <br /><br />The padding is the space inside the navy blue border, and outside the grooved line. The padding is transparent, so it takes on the background color of the <div> element, which is light grey. <br /><br />The grooved line marks the outside border of the content box. The content box is the actual <div> element with a background color of lightgrey and contains this text. <br /><br />The padding, border and margins are all extensions of the <div> element. </p> </div> </body>	This is the <div> element created by the CSS declarations shown in the stylesheet on the left: The margin is the transparent space outside and around the dark navy blue border. The background yellow color of the webpage shows through it. The border is not transparent, which is why it's the navy blue color assigned to it. The padding is the space inside the navy blue border, and outside the grooved line. The padding is transparent, so it takes on the background color of the <div> element, which is light grey. The grooved line marks the outside border of the content box. The content box is the actual <div> element with a background color of lightgrey and contains this text. The padding, border and margins are all extensions of the <div> element.

HTML file:

Displayed by browser:

<body>
<p>This is the <div> element created by the CSS declarations <br />shown in the stylesheet on the left:</p>
<div>
<p style="border-style:groove;">The margin is the transparent space outside and around the dark navy blue border. The background yellow color of the webpage shows through it.
<br /><br />The border is not transparent, which is why it's the navy blue color assigned to it.
<br /><br />The padding is the space inside the navy blue border, and outside the grooved line. The padding is transparent, so it takes on the background color of the <div> element, which is light grey.
<br /><br />The grooved line marks the outside border of the content box. The content box is the actual <div> element with a background color of lightgrey and contains this text.
<br /><br />The padding, border and margins are all extensions of the <div> element.
</p>
</div>
</body>

This is the <div> element created by the CSS declarations
shown in the stylesheet on the left:

The margin is the transparent space outside and around the dark navy blue border. The background yellow color of the webpage shows through it.

The border is not transparent, which is why it's the navy blue color assigned to it.

The padding is the space inside the navy blue border, and outside the grooved line. The padding is transparent, so it takes on the background color of the <div> element, which is light grey.

The grooved line marks the outside border of the content box. The content box is the actual <div> element with a background color of lightgrey and contains this text.

The padding, border and margins are all extensions of the <div> element.