Trying to remove the top padding on a webpage, but encountering some difficulty. Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Test Page</title>
</head>
<body>
<div class="textbox">
<ul>
<li>Object 1</li>
<li>Object 2</li>
<li>Object 3</li>
<li>Object 4</li>
<li>Object 5</li>
<li>Object 6</li>
<li>Object 7</li>
<li>Object 8</li>
<li>Object 9</li>
<li>Object 10</li>
</ul>
</body>
</html>
CSS for styling:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.textbox {
background: red;
height: 50px;
}
.textbox ul {
overflow: auto;
}
.textbox li {
display: inline;
}
Issue is resolved by using universal selector (*), but looking for an alternative solution without it:
* {
margin: 0;
padding: 0;
}
If you have any suggestions on how to eliminate the top padding without relying on the universal selector, I would greatly appreciate your input.