Çözüldü CSS elementin Padding'i artınca arka plan kayıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

ErrorCorrection

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.547
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
1677529303252.png


1677529477964.png


Üstüne geldiğinde Paddin'i 5px artması için ayarladım ama arkadaki sarı arka plan aşağıya kayıyor.
Nasıl çözebilirim?
 
Çözüm
Değişmedi hocam maalesef.
Tekrar şu kodu dener misin.

Kod:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        * {
            margin: 0;
        }

        .navbar {
            background-color: yellow;
            padding: 15px 0 15px 10px;
        }

        .main-div__items > li > a {
            text-decoration: none;
            color: #4E6E81;
            font-weight: bold;
            font-size: 15px;
            font-family: sans-serif;
        }

        .main-div {
            display: inline-block;
            width: calc(100% - 150px);
            text-align: center;
        }

        .main-div__items {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .main-div__item {
            display: inline-block;
            margin-left: 10px;
            box-sizing: border-box;
        }

        .main_logo {
            color: #40513B;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
        }

        .main-div__item:hover {
            background-color: #F5FFC9;
            border: 2px solid #F5FFC9;
        }
    </style>
</head>
<body>
    <header class="main-header">
        <div class="navbar">
            <div class="main-div">
                <ul class="main-div__items">
                    <li class="main-div__item"><a href="#">Bu</a></li>
                    <li class="main-div__item"><a href="#">Bir</a></li>
                    <li class="main-div__item"><a href="#">Deneme</a></li>
                    <li class="main-div__item"><a href="#">Yazısıdır.</a></li>
                </ul>
            </div>
        </div>
    </header>
</body>
</html>

Edit; Eğer ki yine düzelmezse border kodunu kaldırdım şu kodu deneyin.

Kod:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        *{
            margin: 0;
        }
        .navbar{
            background-color: yellow;
            padding: 15px 0 15px 10px;
        }
        .main-div__items > li > a{
            text-decoration: none;
            color: #4E6E81;
            font-weight: bold;
            font-size: 15px;
            font-family: sans-serif;
        }
        .main-div{
            display: inline-block;
            width: calc(100% - 150px);
            text-align: center;
        }
        .main-div__items{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .main-div__item{
            display: inline-block;
            margin-left: 10px;
        }
        .main_logo{
            color: #40513B;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
        }
        .main-div__item:hover{
            background-color: #F5FFC9;
            border: 2px solid #F5FFC9;
        }
    </style>
</head>
<body>
<header class="main-header">
<div class="navbar">
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="#">Bu</a></li>
        <li class="main-div__item"><a href="#">Bir</a></li>
        <li class="main-div__item"><a href="#">Deneme</a></li>
        <li class="main-div__item"><a href="#">Yazısıdır.</a></li>
    </ul>
    </div>
</div>
</header>
</body>
</html>

Technopat Haberler

Geri
Yukarı