减少移动设备上按钮和图像之间的间距

【问题标题】：Reduce spacing between buttons and image on mobile devices减少移动设备上按钮和图像之间的间距
【发布时间】：2019-06-01 05:10:35
【问题描述】：

我在此网站上提供 2 张图片，一张用于大屏幕，另一张用于移动设备：

stickersgallito.pe（如果你需要另一个 css 类）

移动设备的图像远低于预期。我可以使图像上升：top: -40px;，但这会在绿色横幅和图像之间产生间隙。

CSS 类：

.my_home_banner_image {
         bottom: 0;
         top: 0;
         position: relative;
         z-index: 0;
         width: 100%;
         display: block;
         margin-right: auto;
         margin-left: 0px;
 }

差距：

我想：
1) 让图像离橙色按钮更近 40 像素。
2) 在蓝色和橙色按钮之间留出更多空间（奖励）。

完成媒体查询：

@media (max-width: 480px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }

    .productos_finales_home img {

        padding-bottom: 15px;
    }


    .my_home_banner_image {

        bottom: 0;
        top: 0;
        position: relative;
        z-index: 0;
        width: 100%;
        display: block;
        margin-right: auto;
        margin-left: 0px;
    }


    .my_home_banner_title {
        color: white;
        font-size: 36px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }



    .btn-comentario {
        text-decoration: none;
        background-color: #969696;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        color: #fff;
        font-weight: 700;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
        letter-spacing: 0;
        line-height: 1.2;
        -webkit-font-smoothing: antialiased;
        -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
        font-size: 1.4rem;
        padding: 22px 30px;
        border-radius: 6px;
        border: none;
    }


.my_home_banner_left {
    margin-left: 10px;
    z-index: 100;
}

.stickers_referenciales {
    margin-bottom: 5px;
}


}

Codepen

https://codepen.io/anon/pen/mYaRKO

【问题讨论】：

    标签： css


    【解决方案1】：

    我建议不要将<br> 元素用于布局目的。
    供参考，请参阅：

    1. Why isn't the HTML break tag acceptable anymore for top and bottom margins?
    2. Is it sometimes bad to use <BR />?
    3. <br>: The Line Break element .

    注意：不要使用<br>在段落之间创建边距；将它们包裹在 <p> 元素中，并使用 CSS 边距属性来控制它们的大小。

    我已删除它们并调整了按钮元素的边距。
    请注意，由于媒体查询，更改必须以 480 像素或更小的宽度查看。

    @media (max-width: 480px) {

  .col-md-6 .btn {
    margin-bottom: 10%;
  }
  
  .col-md-6:last-child .btn {
    margin-bottom: 0;
  }
  
}
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/custom.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/navbar.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/header.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/preloader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/loader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/footer.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/size-quantity-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="general-container"></div>

<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
  <a class="navbar-brand" href="/">&emsp;&emsp;<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart" style="color:white !important;"></i> ( 0)</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
        </div>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid my_home_banner my_header_bg_color">
  <div class="row">
    <div class="col-md-6 my_home_banner-left">
      <div class="my_home_banner_left">
        <div class="my_home_banner_lef_text">
          <p class="my_home_banner_title">Stickers Personalizados</p>
          <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b><br><b>Envíos a todo el Perú.</b></p>
        </div>
        <div class="row ">
          <div class="col-md-6">
            <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
          </div>
          <div class="col-md-6">
            <a href="/muestras/" class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <picture>
        <source media="(max-width: 480px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_mobiles.png">
        <source media="(max-width: 2056px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
        <img class="my_home_banner_image" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
      </picture>
    </div>
  </div>
</div>

    【讨论】：

      【解决方案2】：

      我给你一个新的结构。 1) 更改标签：

      旧标签：

      <div class="container-fluid my_home_banner my_header_bg_color">
    <div class="row">
        <div class="col-md-6 my_home_banner-left">
            <br>
            <br>
            <div class="my_home_banner_left">

                <div class="my_home_banner_lef_text">
                    <p class="my_home_banner_title">Stickers Personalizados</p>
                    <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b> <br><b> Envíos a todo el Perú.</b></p>
                </div>
                <div class="row ">
                    <div class="col-md-6">
                        <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
                    </div>
                    <br>
                    <div class="col-md-6">
                        <a href="/muestras/"
                           class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-md-6">
            <picture>
                <source media="(max-width: 480px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_mobiles.png">
                <source media="(max-width: 2056px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
                <img class="my_home_banner_image" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
            </picture>
        </div>
    </div>
</div>

      新：

        <div class="container-fluid my_home_banner my_header_bg_color homebanner">
    <div class="row">
      <div class="col-md-6 my_home_banner-left">
        <br>
        <br>
        <div class="my_home_banner_left">

          <div class="my_home_banner_lef_text">
            <p class="my_home_banner_title">Stickers Personalizados</p>
            <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b> <br><b> Envíos a todo el Perú.</b></p>
          </div>
          <div class="row ">
            <div class="col-md-6">
              <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
            </div>
            <br>
            <div class="col-md-6">
              <a href="/muestras/" class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
            </div>
          </div>
        </div>
        <br>
        <br>
      </div>

    </div>
  </div>

      2）CSS：

      .homebanner {
    background-image: url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 100% 100%;
}
@media (max-width: 1280px) {
.homebanner {
    background-size: 75%;
}
}
@media (max-width: 991px) {
.homebanner {
    background-size: 100%;
}
}
@media (max-width: 767px) {
.homebanner {
    padding-bottom: 36%;
    background-size: 80%;
    background-position: 50% 100%;
}
}
@media (max-width: 667px) {
.homebanner {
    padding-bottom: 39%;
    background-size: 90%;
    background-position: 50% 100%;
}
}
@media (max-width: 480px) {
.homebanner {
    padding-bottom: 49%;
    background-size: 100%;
    background-position: 50% 94%;
}
}

      工作方法： 

      .homebanner {
    background-image: url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 100% 100%;
}
@media (max-width: 1280px) {
.homebanner {
    background-size: 75%;
}
}
@media (max-width: 991px) {
.homebanner {
    background-size: 100%;
}
}
@media (max-width: 767px) {
.homebanner {
    padding-bottom: 36%;
    background-size: 80%;
    background-position: 50% 100%;
}
}
@media (max-width: 667px) {
.homebanner {
    padding-bottom: 39%;
    background-size: 90%;
    background-position: 50% 100%;
}
}
@media (max-width: 480px) {
.homebanner {
    padding-bottom: 49%;
    background-size: 100%;
    background-position: 50% 94%;
}
}
      <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Stickers Gallito Perú">
  <meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM" />
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/custom.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/navbar.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/header.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/preloader.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/loader.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/footer.css">
  <link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/size-quantity-styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <link rel="shortcut icon" type="image/png" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/gallito_favicon.png" />




  <title>Stickers Gallito</title>






</head>

<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPXWL88"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
  <!-- End Google Tag Manager (noscript) -->

  <div class="general-container">

  </div>





  <nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
    <a class="navbar-brand" href="/">&emsp;&emsp;<img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
        </li>












      </ul>

      <ul class="navbar-nav ml-auto">

        <li class="nav-item active">
          <a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart"
                                                    style="color:white !important;"></i> ( 0)</a>

        </li>

        <li class="nav-item active">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
          </div>

        </li>
        <li class="nav-item active">
          <a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
        </li>

      </ul>
    </div>
  </nav>

  <br>





  <div class="container-fluid my_home_banner my_header_bg_color homebanner">
    <div class="row">
      <div class="col-md-6 my_home_banner-left">
        <br>
        <br>
        <div class="my_home_banner_left">

          <div class="my_home_banner_lef_text">
            <p class="my_home_banner_title">Stickers Personalizados</p>
            <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b> <br><b> Envíos a todo el Perú.</b></p>
          </div>
          <div class="row ">
            <div class="col-md-6">
              <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
            </div>
            <br>
            <div class="col-md-6">
              <a href="/muestras/" class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
            </div>
          </div>
        </div>
        <br>
        <br>
      </div>

    </div>
  </div>
      剩下的只是编辑它。

      标题

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2017-01-31
        • 1970-01-01
        • 2021-11-27
        • 2017-12-09
        • 1970-01-01
        • 1970-01-01
        • 2020-01-11
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode