Greetings,
I have been noticing a strange occurrence lately, and I finally decided to seek some answers. Below is a snippet of my basic HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style>
div{
width: 200px;
background: green;
}
p{
background: yellow;
margin: 40px;
}
</style>
</head>
<body>
<div>
<p>Testing</p>
</div>
</body>
</html>
As you can see, it's just a simple page with a div containing a paragraph. However, the CSS specifies a 40px margin for the paragraph within the div.
Oddly enough, the top and bottom margins are being disregarded. But when I add a 1px red border to the div, like so:
div{
width: 200px;
background: green;
border: 1px solid red;
}
This is what happens:
Indeed, it seems quite peculiar to me. This issue occurs on Safari, but I suspect it may be present in other browsers as well. My question is, why does this happen? Is there any solution to correct it?
I appreciate your assistance.