Question

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

/*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（）function的参数应该是什么。

请帮助我（注意：margin：0无效）

Answer 1

如果使用以下代码，则img和p标签之间会有余量的原因是img标签未浮动：

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

边距应该消失了。

希望获得帮助

Answer 2

我知道使它起作用的一种方法是添加它，您的img默认为display: inline：

.project-tile img {
  display: 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 img {
  display: block;
}

.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>

网格瓷砖设计

2 个答案: