• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Resetowanie CSS nie działa - odstęp między blokami

VPS Starter Arubacloud
0 głosów
1,232 wizyt
pytanie zadane 16 maja 2017 w HTML i CSS przez edwin20 Początkujący (370 p.)

Witam, resetuje style css, ale nie działają. Mianowicie chcę mieć obok siebie 4 bloki każdy mam mieć 25% szerokości i tutaj pojawia się problem bo jeden się nie mieści. Nie wiem dlaczego. Dodam, że jak dam na float:left to działa normalnie. O co może chodzić?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
        
        
    a.menu{
    display: inline-block;
    width: 25%;
    padding: 15px 30px;
    text-decoration: none;
    text-align: center;
        color:black;
}
        .clear{
            clear: both;
        }
    
    </style>
</head>
<body>
   <nav>
        <a href="" class="menu">skema</a>
        <a href="" class="menu">ds</a>
        <a href="" class="menu">aaasd</a>
        <a href="" class="menu">vvvvvv</a>
        </nav>
    
</body>
</html>

 

2 odpowiedzi

0 głosów
odpowiedź 16 maja 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 16 maja 2017 przez edwin20
 
Najlepsza

tutaj masz wyjaśniony problem ;)
po prostu przy użyciu inline-block jest dodatkowa przestrzeń między blokami, której tak normalnie za pomocą margin czy padding nie da się usunąć.
W linku, który podałam jest pokazane kilka możliwości pozbycia się tego problemu.
Ewentualnie może użyłbyś flexboxa? ;)

komentarz 16 maja 2017 przez pablop76 VIP (123,060 p.)

Jak najbardziej da się usunąć za pomocą margin

margin-left: -4px;

 

komentarz 16 maja 2017 przez imklau Nałogowiec (42,090 p.)
Masz rację.
Miałam na myśli raczej jakieś zerowanie marginesów czy paddingu, jak np w przypadku body.
Ale raczej słabo wygląda w kodzie taki margines ;)
0 głosów
odpowiedź 16 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
display:block;
float:left;
width: 25%;

 

Podobne pytania

0 głosów
5 odpowiedzi 3,255 wizyt
pytanie zadane 16 kwietnia 2017 w HTML i CSS przez JKluseczka Obywatel (1,430 p.)
0 głosów
1 odpowiedź 951 wizyt
pytanie zadane 15 sierpnia 2017 w HTML i CSS przez Sirtek Nowicjusz (170 p.)
0 głosów
3 odpowiedzi 325 wizyt
pytanie zadane 12 czerwca 2017 w HTML i CSS przez Adwormix Nowicjusz (230 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...