In this scenario, the border is not surrounding the blue box but rather extends over the entire window height.
Is there any advice on how to create a border around the blue box?
Important Points:
- The HTML and body definitions cannot be altered.
- The padding in "div1" must remain unchanged.
- I have attempted various combinations involving "display: inline-block," etc., with no success.
- It's likely that this question has been asked before. However, my search for an answer has been fruitless. Any suggestions of a good "duplicate" source would be appreciated.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: row;
}
#div1 {
padding: 2em;
border: 1px solid green;
}
#blueDiv {
width: 5em;
height: 5em;
background-color: blue;
}<!DOCTYPE html>
<html>
<body>
<div id="div1">
<div id="blueDiv"></div>
</div>
</body>
</html>