Stylowanie przy pomocy inline-block

pytanie zadane 21 lipca 2020 w HTML i CSS przez Piotrekkk Nowicjusz (150 p.)

Witam,

przy pomocy float wszystko ładnie się układa ale jak używam inline-block to niestety wygląda to tak jak na załączonym obrazku. Oczywiście nie powinno być tych marginesów. Nie mam pojęcia czemu to tak się robi. O dziwo jak w nav zakomentuje hiperłącza "a" to wtedy jest wszystko ok. Nie wiem co mam z tym zrobić. Proszę o poradę a nie gotowy kod. By zlikwidować problem z marginesami to zrobiłem sztuczkę z ustawieniem font-size na rodzicu elementu na 0 ale dalej nic nie potrafię wykombinować.

To jest prosty kod html'a:

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zadanie</title>
    <link rel="stylesheet" href="zadanie.css">
</head>

<body>
    <div class="wrap">
        <div class="logo"></div>
        <nav class="clearfix">
            <a href="#">jeden</a>
            <a href="#">dwa</a>
            <a href="#">trzy</a>
            <a href="#">cztery</a>
            <!-- <div class="clear"></div> -->
        </nav>
        <section></section>
    </div>
</body>

</html>

A tu css:

* {
    margin: 0;
    padding: 0;
}

.wrap {
    font-size: 0;
}

.logo {
    display: inline-block;
    /* float: left; */
    width: 30vw;
    height: 50px;
    background-color: cornflowerblue;
}

nav {
    display: inline-block;
    /* float: left; */
    width: 60vw;
    height: 50px;
    background-color: darkgoldenrod;
}

nav a {
    display: inline-block;
    /* float: left; */
    font-size: 20px;
    width: 25%;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    color: white;
    transition: .3s;
}

nav a:hover {
    color: black;
    background-color: brown;
}

section {
    height: 40vh;
    background-color: brown;
}

.clear {
    clear: both;
}

3 odpowiedzi

odpowiedź 21 lipca 2020 przez Comandeer Guru (605,260 p.)
wybrane 21 lipca 2020 przez Piotrekkk

Najlepsza

Tak na oko to może być wina vertical-align – https://css-tricks.com/almanac/properties/v/vertical-align/

Spróbuj ustawić te własność na top.

komentarz 21 lipca 2020 przez Piotrekkk Nowicjusz (150 p.)

pomogło dzięki!

ale ustawienie na bottom

odpowiedź 21 lipca 2020 przez Filipczak Gaduła (4,020 p.)

odpowiedź 21 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Na moje oko, nie masz marginesów oraz paddingów, więc nie ma powodów, dla których taki div miałby układać się na dole, z marginesem u góry

komentarz 21 lipca 2020 przez Piotrekkk Nowicjusz (150 p.)

On ma ułożyć się z boku. Jak bym chciał by ułożył się na dole to bym nie dawał display: inline-block bo po co jak blokowe elementy jak div, nav, section, header, main układają się pod sobą. Chodzi o to by się ułożył tak:

no ale teraz nie ma nawigacji a dokładnie zakomentowałem w nav hiperłącza "a"