Я ищу, чтобы контролировать коробку вокруг <ul><li> <a href=''>Register</li></ul>.Я сделал зеленоватый фон вокруг этого элемента списка, но я хотел бы контролировать верхнюю и нижнюю границу, чтобы приблизить их к тексту Регистрация
Если честно,левая и правая стороны также были далеко, и я не уверен, как я их случайно починил.Не заметил изменения до сих пор.
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
}
.clear {
clear: both;
}
body {
background-color: #37acc5;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}
#top {
background-color: #ffffff;
}
header {
float: left;
}
a {
text-decoration: none;
color: #262626;
}
li {
list-style-type: none;
}
header h1 {
color: #262626;
padding-left: 15px;
padding-top: 5px;
}
#nav-top {
float: right;
min-height: 50px;
}
#list1 li {
float: left;
padding: 5px;
margin-left: 5px;
}
#id-top-nav-link {
float: left;
}
#id-select select {
float: right;
margin-top: 17px;
}
#top-link div {
display: inline-block;
vertical-align: middle;
line-height: 40px;
padding-right: 10px;
}
.nav .div-list .list > li {
padding-left: 15px;
}
#list1 #register {
background-color: #37acc5;
border-radius: 10%;
}
#article {
background-image: url('../img/blockchain.jpg');
background-position: 0%;
padding: 100px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#article div {
margin-left: 0px;
}
#art-text {
background-color: #37acc5;
}
article h1, h2 {
text-align: center;
}
#footer1 {
float: left;
}
#footer2 {
float: right;
}
<body id="body">
<!-----------------------------------HEADER------------------------------------------->
<div id="top">
<header id="header">
<h1>Icon Share</h1>
</header>
<!-----------------------------------NAV---------------------------------------------->
<nav id="nav-top" class="nav">
<div id="top-link">
<div class="div-list" id="id-top-nav-link">
<ul class="list" id="list1">
<li id="register"><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div id="id-select">
<select>
<option value="english">English</option>
<option value="chinese">Chinese</option>
<option value="spanish">Spanish</option>
<option value="portugese">Portugese</option>
</select>
</div>
<div class="clear"></div>
</div>
</nav>
<div class="clear"></div>
</div>
<!----------------------------------MAIN---------------------------------------------->