niewielki margines pod zdjęciem html + css

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

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?

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?

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/

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