Question

我正在使用引导程序创建自己的个人网站。

我已经使用bootstrap4进行了一些修改。但是，html边距大于正文。我已经检查过其他问题，他们说

或其他标签具有默认边距，您需要将其设置为零，但是我使用的是reset.css，而且我尝试将marign的值设置为零很多元素，但没有用

重置的CSS和指向我的网站的链接：https://sitezinho--mateusmsouza.repl.co/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

和HTML

<!DOCTYPE html>
<html>

<head>
    <title>Mateus Machado - Site Pessoal</title>
    <link rel="stylesheet" type="text/css" href="public/css/reset.css">
    <link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="public/css/custom.css">

    <script type="text/javascript" href="public/js/jquery-3.4.0.min.js">

    </script>
    <script type="text/javascript" src='public/js/bootstrap.bundle.min.js'>

    </script>
</head>

<body>
    <main role="main">
        <nav class="navbar sticky-top navbar-expand-lg navbar-light " style="background-color: black">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a href="/index.html" class="nav-link text-light px-5">Hello World</a></li>
                <li class="nav-item active"><a href="#" class="nav-link text-light px-5">Projetos</a></li>
                <li class="nav-item active"><a href="#" class="nav-link text-light px-5">Material de Estudo</a></li>


            </ul>

            <ul class="navbar-nav mr-auto>
          <li class=" nav-item active "> <a href="http://github.com/mateusmsouza " class="nav-link "><img src="GitHub-Mark-Light-32px.png "> </a></li>
        </ul>

      </nav>

    <section class="my-4 " >
      <div class="content ">
        <h1 class="h1-responsive font-weight-bold text-center ">printf("Olar ");</h1>

        <p class="lead grey-text text-center w-responsive mx-auto mb-5 ">Me chamo Mateus Machado, trabalho atualmente como Software Tester, graduando em Tecnologia de Banco de Dados. Desenvolvo para projetos pessoais no tempo livre e no tempo mais livre toco violão e faço outras coisas de humano :)</p>

        <div class="container-fluid px-5 py-5 " style="background-color:grey ";>
          <div class="row container-fluid " ">
                <div class="col-5">
                    <img class="img-fluid img-thumbnail" src="img/magogenteboa.jpg">
            </div>

            <div class="col-7 container-fluid">
              <ul>
                <li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
                  <img class="img-fluid" src="img/baseline_school2.png">
                   <p class="text-light">Técnico em Redes de Computadores pela 
                     <a href="http://etecjbento.com.br/web/" class="acustom">Etec Cônego José Bentos</a> 
                    </p>
                  <small class="text-light font-italic">Período: 2016 - 2017</small>

                <li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
                  <img class="img-fluid" src="img/baseline_school2.png">
                  <p class="text-light">Graduando em Tecnologia de Banco de Dados pela <a  href="http://fatecsjc-prd.azurewebsites.net/" class="acustom">Fatec São José dos Campos</a> </p>
                  <small class="text-light font-italic">Período: 2018 - Atualmente</small>
                </li> 


                <li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
                  <img class="img-fluid" src="img/baseline_work2.png"> 
                  <p class="text-light">Tester de Software na 
                    <a href="https://www.demaria.com.br/site/" class="acustom">DeMaria</a>
                  </p>
                  <small class="text-light font-italic" >Período: 2017 - Atualmente</small>
                </li>
              </ul>

            </div>
          </div>
        </div>
      </div>

    </section>
    </main>
                <style>
              body, p, html , h1, nav, section, main, img{
                margin: 0;

              }
            </style>
  </body>
</html>

Answer 1

Fala Mateus，blz？

将[{"Key":"ابعاد ماوس","Value":""},{"Key":"فرکانس ماوس","Value":""},{"Key":"مقاوم در برابر رطوبت","Value":"بله"},{"Key":"ورودی میکروفن و هدفون","Value":"ندارد"},{"Key":"تعداد باتری"},{"Key":"برد صفحه کلید","Value":""},{"Key":"ورودی USB","Value":"ندارد"},{"Key":"کلیدهای میانبر","Value":""},{"Key":"دقت","Value":"1000"},{"Key":"نوع حسگر ماوس"},{"Key":"مقاوم در مقابل نفوذ مایعات","Value":"خیر"},{"Key":"تعداد کلیدها","Value":""},{"Key":"تعداد کلیدهای میانبر","Value":"10"},{"Key":"قابل استفاده با هر دو دست","Value":"خیر"},{"Key":"کلید روشن و خاموش","Value":"ندارد"},{"Key":"نوع باتری صفحه کلید","Value":""},{"Key":"نسخه بلوتوث","Value":""},{"Key":"وزن","Value":"950"},{"Key":"نوع رابط","Value":"پورت USB"},{"Key":"نمایشگر میزان باتری صفحه کلید"},{"Key":"عمر یا ضربه‌پذیری کلیدها","Value":"10 میلیون بار"},{"Key":"وزن ماوس","Value":""},{"Key":"مقاوم در برابر گرد و غبار","Value":"بله"},{"Key":"میانگین عمر باتری صفحه کلید","Value":""},{"Key":"چراغ‌ پس زمینه صفحه کلید","Value":"دارد"},{"Key":"سایر قابلیت‌های صفحه کلید","Value":""},{"Key":"سایر قابلیت‌های ماوس","Value":""},{"Key":"محدوده دقت","Value":"800 تا 1600"},{"Key":"ابعاد","Value":"41 × 186 × 471 میلی‌متر"},{"Key":"نوع اتصال","Value":"باسیم"},{"Key":"طول کابل","Value":"160"},{"Key":"نمایشگر میزان باتری ماوس"},{"Key":"نوع کابل","Value":""},{"Key":"صفحه نمایش"},{"Key":"کلید روشن و خاموش"},{"Key":"سازگار با سیستم عامل‌های","Value":"تمام سیستم عامل ها"},{"Key":"تعداد کلیدهای ماوس","Value":""},{"Key":"برد ماوس","Value":""},{"Key":"توضیحات تاچ پد","Value":""},{"Key":"همراه با ماوس","Value":"بله"},{"Key":"حروف حک شده فارسی","Value":"دارد"},{"Key":"توضیحات صفحه نمایش","Value":""},{"Key":"میانگین عمر باتری ماوس","Value":""},{"Key":"فرکانس صفحه کلید","Value":""},{"Key":"تعداد باتری ماوس"},{"Key":"منبع تغذیه","Value":"USB"},{"Key":"نوع باتری ماوس","Value":""},{"Key":"تاچ پد","Value":"ندارد"},{"Key":"توضیحات قابلیت بی‌سیم","Value":""}]更改为margin: 0;

这可能会解决，但是正确的方法是从应用于该元素的类中删除“ margin”。

致以问候，

布拉卡（Brhaka）

Answer 2

尝试删除顶部的所有标签，然后将其替换为*。星号表示html文档中的所有标签。我以这种方式重写了您的代码：

*{
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

如果我的代码无法正常工作，并且还可以包含html代码，则对解决此问题确实很有帮助

HTML的边距大于正文

2 个答案: