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

niewielki margines pod zdjęciem html + css

VPS Starter Arubacloud
0 głosów
621 wizyt
pytanie zadane 8 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)
edycja 8 listopada 2016 przez Dynamic

Witam, mam na zadanie zrobić prostą stronę, ale pod jednym zdjęciem robi mi się niewielki margines.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
    <img src="baner.png" alt="">
        <div class="menu">  
    </div>
    </div>

</body>
</html>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.container
{
    width: 1200px;
    margin: auto;
    background-color: aqua;
}
.menu
{
    width:40%;
    height: 40px;
    background-color: red;
}

PROBLEM:

komentarz 8 listopada 2016 przez Ivan Maniak (60,650 p.)

Wrzuć kod do znacznika code

komentarz 8 listopada 2016 przez Dynamic Bywalec (2,910 p.)
sorki
 już poprawiam
komentarz 8 listopada 2016 przez KamilloPL Gaduła (3,470 p.)
w moim rozwiązaniu podmień sobie grafike- o to chodziło ?
komentarz 8 listopada 2016 przez Dynamic Bywalec (2,910 p.)
Nie rozumiem, ale nie o to

2 odpowiedzi

+1 głos
odpowiedź 8 listopada 2016 przez Ivan Maniak (60,650 p.)

Aby to naprawić wystarczy dodać do obrazka display: block

komentarz 8 listopada 2016 przez Dynamic Bywalec (2,910 p.)
mógłbyś wytłumaczyć dlaczego?
2
komentarz 8 listopada 2016 przez Mlody89 Mądrala (6,920 p.)
ponieważ znacznik img jest elementem liniowym (zawartość jest trktowana jak tekst) i jego zawartość jest wyrównywana do lini bazowej a ten odstęp to nic innego jak miejsce poniżej lini bazowej w którym w przypadku tekstu mieszczą się ogonki ą i ę czy dolna część liter p q y g itd
komentarz 8 listopada 2016 przez Dynamic Bywalec (2,910 p.)
edycja 8 listopada 2016 przez Dynamic
Super wytlumaczenie, dzieki :)

A co w przypadku wysrodkowania elementu blokowego ? Bez podanej szerokosci?
1
komentarz 8 listopada 2016 przez Mlody89 Mądrala (6,920 p.)
Jeżeli nie ma podanej szerokości to najprawdopodobniej jest wyśrodkowany bo domyślnie ma 100% szerokości (o ile nie ma np float: left). Jak nadasz mu szerokość to zadziała margin: 0 auto. Ogólnie wszystko zależy od sytuacji i efektu jaki chcesz osiągnąć.

Tu masz linka do (chyba) wszystkich metod centrowania w css zależności od sytuacji

https://css-tricks.com/centering-css-complete-guide/
0 głosów
odpowiedź 8 listopada 2016 przez KamilloPL Gaduła (3,470 p.)
edycja 8 listopada 2016 przez KamilloPL
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
      <title>Document</title>
  </head>
  <body>
    <div class="container">
      <img src="http://womensvoicesforchange.org/wp-content/uploads/2015/11/1200px-Paris_Night.jpg" alt="">
    <div class="menu-right"> 
      <div class="menu">
      </div>
    </div>
  </div>
  </body>
</html>

 

*
{
margin: 0;

}
.container
{
width: 1200px;
margin: auto;
}
img{
  display:block;
}
.menu
{
width:40%;
height:40px;
background-color: red;
float:left;
}
.menu-right{
background-color: aqua;
width:100%;
height:40px;
float:left;
}

ja bym to zrobił na divach - na szybko to tak zrobiłem. mogę się mylić bo też dopiero zaczynam ale chyba tak wygląda lepiej

komentarz 8 listopada 2016 przez Dynamic Bywalec (2,910 p.)
Ale ja juz to zrobilem xd

Podobne pytania

+1 głos
2 odpowiedzi 243 wizyt
pytanie zadane 10 kwietnia 2021 w HTML i CSS przez LordXyz Nowicjusz (130 p.)
0 głosów
1 odpowiedź 444 wizyt
pytanie zadane 27 kwietnia 2020 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)
0 głosów
2 odpowiedzi 336 wizyt
pytanie zadane 19 marca 2017 w HTML i CSS przez Ziom Początkujący (430 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!

...