Chrome图像放置问题。 1px的缓冲区？

Question

I'm having a hard time explaining this. But, basically, in Google Chrome I have an issue where I placed an image to the bottom of a div and there is a 1px border or "buffer at the bottom that I can't remove.

Here's what I see!

Chrome:

---

Opera:

---

I want the Chrome one to look like the Opera one.

Here is the code!

---

This is the CSS
Mind the sloppiness. This website is in a rough draft right now.

@media screen and (max-width: 450px) {
  * {
    padding: 0;
    margin: 0;
    outline: none;
  }

  .mmenu {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #aaa;
  }

  .mobileBody {
    z-index: 1;
    background-color: #fff;
  }

  .mhead {
    background-image: url(../img/head.jpg);
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .logo {
    margin: auto;
  }

  img.logoImg {
    width: 175px;
    height: auto;
    margin: auto;
    margin-top: 15px;
  }

  .mhead img.cut {
    margin: 0;
    margin-top: 1px;
    padding: 0;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
  }

  .card {
    background-color: #fff;
    width: 100%;
    height: auto;
  }

  .final {
    display: flex;

  }

  .flavImg {
    display: flex;
    justify-content: center;
    align-items:center;
    width: 45%;
  }

  .flavImg img {
     height: 80%;
     width: auto;
  }

  .flavDesc {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .flavDesc h1 {
    font-size: 21pt;
    text-align: left;
    font-family: 'Dancing Script', cursive;
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 5px;
  }

  .flavDesc p {
    font-size: 11pt;
    text-align: left;
    font-family: 'Ledger', serif;
    line-height: 125%;
    -webkit-font-smoothing: subpixel-antialiased;
    margin-top: 5px;
  }

  .edit {
    display: none;
  }
}

---

This is in Jade.
Mind the sloppiness. This website is in a rough draft right now.

doctype html
html
  head
    title Conecopia Gelato - Ice Cream The Italian Way!

    meta(name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA.  At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.")
    meta(name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market")
    meta(name="author" content="Anthony F. DeSante")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")

    link(href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet")

    link(rel="stylesheet" type="text/css" href="ast/css/index.css")

  body
    .computer
    .mobile
      .mmenu
        ul.mmainNav
          a(href="#")
            li Home
          a(href="#")
            li Flavors
          a(href="#")
            li Contact Us
          a(href="#")
            li About
        ul.mlowerNav
          a(href="#")
            li Home
        .msocialmedia
          //Social Media Icons Go Here.
      .mobileBody
        .mhead
          .logo
            img(src="./ast/img/logo.png").logoImg
          img(src="./ast/img/cut.png").cut
        .mWeekFlavs.dispHor
          .row
            .card
              .final
                .flavImg
                  img(src="./ast/img/icecream.png")
                .flavDesc
                  .flavName
                    h1 Flavor Name
                  .flavText
                    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
              .edit.ifAdmin
                form(method="post" action="#")
                  input(type="file" name="image" accept="image/*")
                  input(name="flavName" type="text" placeholder="Flavor Name" value="")
                  textarea(row="5" col="auto")
                  input(type="reset")
                  input(name="save" type="submit" value="Save")
          .statusBar
            span#head

        .mAllFlavs.dispHor
br
br
br
br
br
br
br

br
br
br
br
br

br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br

---

This is the HTML (Processed through PrePros) It's here for those who don't like Jade?

<!DOCTYPE html>
<html>
  <head>
    <title>Conecopia Gelato - Ice Cream The Italian Way!</title>
    <meta name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA.  At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.">
    <meta name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market">
    <meta name="author" content="Anthony F. DeSante">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="ast/css/index.css">
  </head>
  <body>
    <div class="computer"></div>
    <div class="mobile">
      <div class="mmenu">
        <ul class="mmainNav"><a href="#">
            <li>Home</li></a><a href="#">
            <li>Flavors</li></a><a href="#">
            <li>Contact Us</li></a><a href="#">
            <li>About</li></a></ul>
        <ul class="mlowerNav"><a href="#">
            <li>Home</li></a></ul>
        <div class="msocialmedia">
          <!--Social Media Icons Go Here.-->
        </div>
      </div>
      <div class="mobileBody">
        <div class="mhead">
          <div class="logo"><img class="logoImg" src="./ast/img/logo.png"></div><img class="cut" src="./ast/img/cut.png">
        </div>
        <div class="mWeekFlavs dispHor">
          <div class="row">
            <div class="card">
              <div class="final">
                <div class="flavImg"><img src="./ast/img/icecream.png"></div>
                <div class="flavDesc">
                  <div class="flavName">
                    <h1>Flavor Name</h1>
                  </div>
                  <div class="flavText">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                  </div>
                </div>
              </div>
              <div class="edit ifAdmin">
                <form method="post" action="#">
                  <input type="file" name="image" accept="image/*">
                  <input name="flavName" type="text" placeholder="Flavor Name" value="">
                  <textarea row="5" col="auto"></textarea>
                  <input type="reset">
                  <input name="save" type="submit" value="Save">
                </form>
              </div>
            </div>
          </div>
          <div class="statusBar"><span id="head"></span></div>
        </div>
        <div class="mAllFlavs dispHor"></div>
      </div>
    </div>
  </body>
</html><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

---

So if anybody has a way to remove the 1px "buffer" please send it in!

Answer 1

To ensure no extra default padding/margins are added (and it does vary from browser to browser) put this at the TOP of your css

* {
  margin: 0;
  padding: 0;
}

This will get rid of any default auto-added margins and padding. I added this to your css (i removed the extra 1px margin also, and some excess html/css)

Got this and don't see any issue (I'm using the latest Chrome)

Hope this helps

Answer 2

Apparently, I found a solution...

It took me a while to realize that I was just flat out doing bad code.

For those who are wondering, In order to fix this I just wrapped my whole "body" section of my body in a div called <div class="MobileBody"> (Everything except the head) </div> . Then I used the pseudo-element ::before and set the background to the image. After that, all I had to do was mess around with the alignment and the background position and size to make it work out!

I hope that was understandable.