Looking to create a sleek menu bar that's 40px tall and fills up 80% of the browser width.
The challenge arises when trying to center the text within the menu items. Despite adjusting padding for alignment, there's still a small gap because of <a> padding.
To address this issue, it was found that setting the padding at 10.35px instead of 10px or 11px resolves the problem.
Here is the HTML structure:
<html>
<head>
<meta charset="utf-8" />
<title>myWebSite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="www.google.com">Hello</a>
</li>
<li>
<a href="www.google.com">Hello</a>
</li>
<li>
<a href="www.google.com">Hello</a>
</li>
<li>
<a href="www.google.com">Hello</a>
</li>
<li>
<a href="www.google.com">Hello</a>
</li>
<li>
<a href="www.google.com">Hello</a>
</li>
</ul>
</div>
</body>
</html>
Check out the corresponding CSS styling:
body, html {
width : 100%;
margin : 0;
}
#menu {
background-color : black;
width : 100%;
height : 40px;
}
ul {
list-style : none;
height : 100%;
background-color : yellowgreen;
}
li {
margin : 0;
padding : 0;
float : left;
line-height : 40px;
background-color : blue;
}
a {
margin : 0;
text-decoration : none;
color : white;
font-weight : bold;
padding : 10px 5px;
background-color : blueviolet;
}
a:hover {
background-color : orange;
}
Seeking insight from experts on why this pixel discrepancy occurs and what alternative solutions may be more effective in achieving proper alignment?