`HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="The_box_model.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
CSS CODE:-
p {
padding: 10px 20px;
border: 5px solid gold;
}
Steps Taken:
Ensured the CSS files are correctly linked in the HTML.
Tried different browsers to see if the issue persists.
Used browser developer tools to inspect the element and confirm that the styles are not being applied.
Observed Behaviour:
Despite the CSS being linked and the syntax appearing correct, the padding and border are not displayed on the
element.
Expected Behavior:
The
element should have 10px padding on top and bottom, 20px padding on left and right, and a 5px solid gold border.
What could be causing the CSS padding and border not to display? Are there any common pitfalls or troubleshooting steps I might have overlooked?`
Jeevan Gaire is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.