Upon observing the image, it is clear that the red box has transformed into a line. Even after setting the height to 300px, there seems to be no impact on the image whatsoever. I initially configured the height to 200px within the div and ul tags of the CSS page.
Unfortunately, I am unable to upload an image to showcase the issue.
HTML PART:
<!DOCTYPE html>
<html>
<head>
<title>multiple box</title>
<link rel="stylesheet" type="text/css" href="test22.css">
</head>
<body>
<div class="div1">
<ul>
<li><img src="chicken.jpg"/></li>
<li><img src="chicken.jpg"/></li>
<li><img src="chicken.jpg"/></li>
</ul>
</div>
</body>
</html>
CSS PART:
body{
margin: 0px;
padding: 0px;
}
.div1{
width: 800px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left: 100px;
margin-top: 20px;
}
.div1 ul{
width: 350px;
height: 200px;
border-top: 1px solid red;
margin-left: 100px;
margin-top: 20px;
list-style-type: none;
}
.div1 li {
width: 50px;
height: 52px;
border: 1px solid blue;
float: left;
}
.div1 img {
width: 40px;
}