Part Three • Create a paragraph tag nested inside a div underneath the second card • In a few sentences explain why we experienced an overflow of content in the first card but not the second card. You must mention both elements that caused an overflow and include details about how the box model and box sizing property relate to this problem o Put this response inside the paragraph tag Use the appropriate classes to center the paragraph's parent div inside the body o Hint: use 2 classes from box-styles.css
<!DOCTYPE html>
<html lang="en">
below is box-styles.css
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
body {
font-size: 62.5%;
margin: 0;
}
h1 {
font-size:4em;
text-align: center;
font-family: 'Rubik Mono One', sans-serif;
}
h3 {
font-size: 2em;
}
p {
font-size: 1.5em;
}
h3, p {
margin:0;
}
.title-padding {
padding: 5% 10%;
}
.body-padding {
padding-left: inherit;
padding-right: inherit;
padding-top: 7%;
}
.light-shadow {
box-shadow: transparent;
}
.max-width {
max-width: 50em;
}
/* .full-width {
} */
.center-element {
margin-top:8em;
margin-left:inherit;
margin-right: inherit;
text-align: center;
}
.round-borders {
border:1px solid black;
border-radius: 0.25em;
font-size: 2em;
}
.bb {
box-sizing: content-box;
width:100%;
padding: inherit;
margin: inherit;
}
.cb {
box-sizing: content-box;
}
</style>
above is the box-styles.css
<head>
<meta charset="UTF-8">
<title>Lab 9 (Week 10)</title>
<style>
@import url(./styles/box-styles.css);
@import url(./styles/color-styles.css);
</style>
</head>
<body>
<h1>Box Model</h1>
<div class="cb-container light-shadow center-element round-borders max-width">
<div class="cb-title title-padding cb full-width">
<h3>Content Box</h3>
</div>
<div class="cb-btm body-padding cb full-width">
<p><code>content-box </code>gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px</p>
</div>
</div>
<div class="bb-container light-shadow center-element round-borders max-width">
<div class="bb-title title-padding bb full-width">
<h3>Border Box</h3>
</div>
<div class="bb-btm body-padding bb full-width">
<p><code>border-box</code> tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. </p>
</div>
</div>
</body>
</html>
Answer:
Updated Source Code:
Step by step
Solved in 2 steps with 2 images
