Как изменить размер элемента?

Question

[neulwert]

Подскажите как называется эта красная зона и как её менять, не background-size же. Надо сделать так, чтобы она обтекала надписи. То есть я пишу к примеру top: 10px; и css должен отсчитывать от надписей, а не от этой зоны.

<div id='page'>          
    <nav class='nav'>
        <ul class='ul-links'>
            <li class='active'><a href='index.html'>Home</a></li>
            <li><a href='product.html'>Product</a></li>
            <li><a href='blog.html'>Portfolio</a></li>
            <li class='li-link drop'><a href='blog.html'>Blog</a>
                <div class='dropdown-nav'>
                    <div class='dropdown-content'>
                        <a href="#">Web Design</a>
                        <a href="#">eCommerce</a>
                        <a href="#">Branding</a>
                        <a href="#">API</a>
                    </div>
                </div>
            </li>
            <li class='li-link'><a href="about.html">About</a></li>
            <li class='btn-login'><a href="#"><span>Login</span></a></li>
        </ul>
    </nav>
</div>

.nav {
    position: absolute;
    top: 5px;
    right: 50px;
    background: red;
    
}

.ul-links {
    display: flex;
    list-style: none;
}
  
  .li-link {
    position: relative;
}
  
  .ul-links li:hover {
    background: tomato;
}
  
  a {
    display: inline-block;
    border: 1px solid black;
    padding: 0.7rem 1.2rem;
}
  
  .dropdown-nav {
    position: absolute;
    display: none;
}
  
  .drop:hover .dropdown-nav {
    display: block;
}
  
  .dropdown-nav a:hover {
    background: crimson;
}

Answer 1

[drawnofmymind]

код можно?

Comments

[neulwert]

drawnofmymind прошу прощения, добавил

[drawnofmymind]

а css?)Я не знаю каким образом ты делаешь,могу сделать как в вопросе

[neulwert]

drawnofmymind, добавил)

[drawnofmymind]

#page{
  position: relative;
}
.nav {
    position: absolute;
    top: 5px;
    right: 50px;
   
}

.ul-links {
    display: flex;
    list-style: none;
    background: red;
}
  
  .li-link {
    position: relative;
}
  
  .ul-links li:hover {
    background: tomato;
}
  
  a {
    display: inline-block;
    border: 1px solid black;
    padding: 0.7rem 1.2rem;
}
  
  .dropdown-nav {
    position: absolute;
    display: none;
}
  
  .drop:hover .dropdown-nav {
    display: block;
}
  
  .dropdown-nav a:hover {
    background: crimson;
}

[drawnofmymind]

так?

[neulwert]

drawnofmymind, в итоге я хочу оставить только надписи, чтобы можно было считать top, right от них, без border и без этой красной штуки, она тут только для наглядности

[drawnofmymind]

Блин,я что то не совсем понимаю( ну допустим красная зона это padding,считай top,right и учитывай padding?

[neulwert]

drawnofmymind, спасибо, все правильно, сегодня с интернетом беда, написал прежде чем увидел ответ.

Answer 2

[L1nks]

Если я правильно понял вопрос, то красная зона это размер блока nav.
Он увеличился в размера, так как у тега ul есть стандартные paddding's и margin's
Если их обнулить, то размер будет подстраиваться пол размер списка элементов

Comments

[neulwert]

Спасибо, буду учитывать в будущем