what is the total height of the section element - do not include the thickness of the borders
HTML/CSS
-
Given the following HTML and the accompanying css, and the illustrated output for the section element
A section element is another way of creating an outer div element. IN this case there is the div section
, containing first a paragraph ,the margin below that in grey, then followed by the blue div- the outer flex container.
The blue div has three divs inside it ( red, green and blue)
If the margin below the paragraph is changed to 75px , the outer flex container
height is changed to 400px, the 750px height is removed from the section element,
what is the total height of the section element - do not include the thickness of the borders
<html>
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" type="text/css" href="square12_with_pg.css">
<title>Squarespace layout</title>
<body>
<nav></nav>
<header></header>
<section>
<!-- main paragraph -->
<p></p>
<!-- Two column-type things -->
<div id="flex-container">
<div class="col">
</div>
<div class="col1">
</div>
<div class="col">
</div>
</div></section>
<footer></footer>
</body>
</html>square12_with_pg.css file
body {
margin: 0;
}#flex-container {
height: 300px;
background-color:blue;
}nav {
background-color: royalblue;
height: 75px;
margin:150px;
}header {
background-color: lightskyblue;
height: 400px;
margin:100px;
}section {
background-color: gray;
margin: 75px ;
height:750px;
}footer {
background-color: black;
height: 100px;
}p {
background-color: khaki;
height: 275px;
margin-bottom: 175px;
}div.col {
background-color: tomato;
border: 1px solid black;
height:50px;
width:300px;
}div.col1 {
background-color: green;
border: 1px solid black;
height:100px;
width:300px;
}
a. 650px
b. 750px
c. 500px
d. 675px
Step by step
Solved in 4 steps with 1 images
