html - 网格瓷砖设计

Question

您好，我正在尝试复制这支笔:[1]:https://codepen.io/freeCodeCamp/full/zNBOYG我使用过网格概念，但我是新手，因此网格图 block /元素设计不准确。我的代码如下:-

/*Base */

html {
  scroll-behavior: smooth;
}

*,
html {
  margin: 0;
}


/* Typography*/

li {
  font-family: sans-serif;
}

h1,
h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 3rem;
}

h2 {
  font-size: 1.8rem;
}

.welcome-section>p {
  font-size: 1.5rem;
  font-weight: 200;
}


/* layout */

nav {
  text-align: right;
  position: sticky;
  top: 0;
  margin: 0;
}

ul li {
  list-style-type: none;
  padding: 20px 30px;
  height: 100%;
  display: inline-block;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.projects-gird {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  grid-gap: 2rem;
}

.project-tile {
  margin-top: 2rem;
  border: 1px solid black;
  margin-bottom: 0;
}

.project-tile span {
  display: none;
}

.project-tile p:hover span {
  color: orange;
  display: inline;
  font-weight: 200;
}


/*Decoration*/

nav {
  background-color: #BE3144;
}

li {
  color: white;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

ul li:hover {
  background-color: #5A7384;
}

.welcome-section {
  background-color: #000;
}

h1 {
  color: white;
}

.welcome-section>p {
  color: red;
  font-style: italic;
}

.projects-section {
  text-align: center;
  padding: 4rem 2rem;
  background-color: #8878c3;
}

.projects-section-header {
  color: white;
  border-bottom: 0.2rem solid white;
}

.project-tile p {
  background-color: black;
  margin-top: 0;
}

img {
  margin: 0;
  width: 100%;
}

<section id="projects" class="projects-section">
  <h2 class="projects-section-header">These are some of my projects</h2>
  <div class="projects-grid">
    <div class="project-tile">
      <a href="#welcome-section"><img src="https://i.postimg.cc/JnPffRyN/project-fiddle.png">
        <p>
          <span>&#60;</span> work1
          <span>/&#62;</span>
        </p>
      </a>
    </div>
    <div class="project-tile">
      <a href="#welcome-section"><img src="#">
        <p>
          <span>&#60;</span> work1
          <span>/&#62;</span>
        </p>
      </a>
    </div>
  </div>
</section>

正如您所看到的结果，img 和 p 元素之间有一个空格，而且拼贴设计也不准确。此外，如果我想将两个拼贴放在一行中， minmax() 函数的参数应该是什么。

请帮我解决这个问题(注意:margin:0 无效)

Answer 1

img 和 p 标签之间有空白的原因是 img 标签没有 float ，如果您使用以下代码:

img {
  margin: 0;
  width: 100%;
  float:left;
}

边距应该没有了。

希望对你有帮助