My text has large vertical spaces between each new line within a div?

StackOverflow https://stackoverflow.com/questions/21807089

  •  12-10-2022
  •  | 
  •  

Question

If you run the following code you will notice that the word hello is output vertically in a white div with a large distance between each new line. I've tried many different things such as getting rid of the margin style (not sure if it mattered) but no luck finding a solution.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">  
<title>div_experiment</title>
</head>
<body>
<style type = "text/css">
body
{
    background-color: black;
}
#div_id
{
    position: absolute;
    top: 0%;
    left: 50%;
    margin: 0 auto; 
    overfill: auto auto;    
    max-height: 696px;  
    background-color: white;
    font-size: 25px;
}
</style>
<script language="JavaScript"> 
</script>   
<div id = "div_id">
    <p>hello</p><br>
    <p>hello</p><br>
    <p>hello</p><br>    
</div>
</body>
</html>
Was it helpful?

Solution

Your paragraph elements have that margin, not the container. So this rule should fix it: 

#div_id p {margin: 0;}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top