the problem is happening on chrome and edge. but mozilla works fine
look p tag is overflowing div tag
output in chrome/edge
expected output:
expected output which is showing in Mozillla
what is limitation of my code that the problem is happening on chrome but not on mozilla. how can I get expected output on chrome to stop overflowing of paragraph tag?
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Box Model</title>
<style>
div {
height: 200px;
width: 200px;
}
p {
margin: 0;
}
#first {
background-color: cadetblue;
padding: 20px;
border: 10px solid black;
}
#second {
background-color: gold;
border: solid black;
border-width: 20px 10px;
margin-left: 260px;
}
#third {
background-color: indianred;
border: 10px solid black;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In
id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus
dolor metus, laoreet ac convallis sit amet, efficitur sed dolor. </p>
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
</html>
what should I add to solve the problem?
New contributor
Tahsin Ahsan Sarker is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.