在 css 边距和 div 图像约束方面有问题，希望得到一些建议或提示

Question

我正在尝试创建一个动态图库，但我一直运行遇到代码在 jsfiddle 中显示正确的问题，但是一旦我将它添加到 wordpress 中，我就运行变成了一个数字的问题。主要是，图像标题和 meta-data 之间的边距延伸到一个荒谬的程度，即使我很确定我使用的是可行的 div 约束，但我不能这样做，因为最后一张图像打破了它的容器并弄乱了生产线。

我认为我的问题可能部分是由于我没有唯一的 ID 来将画廊代码与我正在使用的 WordPress 主题的内置样式分开，但我不完全是确定在这方面从哪里开始。至于其余的，老实说我不知道，我搜索了 "how to constrain/format/stretch/confine an image to a div container" 和同一问题的其他各种版本，但我仍然不知道问题出在我的代码中。

这是我的 jsfiddle 代码的 link：https://jsfiddle.net/nh2geqah/1/

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
main,
nav,
ruby,
section,
summary {
  display: block;
}
#front-page-blog {
  clear: both;
  position: relative;
  padding: 1.5em 0;
}
#front-page-blog .featured-image {
  position: relative;
  margin-bottom: 0.5em;
}
#front-page-blog,
#front-page-blog .featured-image {
  background-color: white;
}
#front-page-blog::after {
  clear: both;
  content: "";
  display: table;
}
#page {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#page {
  -webkit-box-shadow: 0 0 1px 0 rgba(34, 34, 34, .3);
  -moz-box-shadow: 0 0 1px 0 rgba(34, 34, 34, .3);
  box-shadow: 0px 0px 1px 0px rgba(34, 34, 34, 0.3);
}
body {
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
body,
button,
input,
optgroup,
select,
textarea {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4545;
}
/* @media only screen and (min-width:1025px) */

body,
button,
input,
optgroup,
select,
textarea {
  font-size: 22px;
  font-size: 1.37rem;
}
body {
  background-color: #444;
}
body,
button,
input,
optgroup,
select,
textarea {
  color: #222;
}
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}
html {
  font-size: 16px;
}
html {
  margin-top: 80px !important;
}
.grid {
  margin: 0 auto;
  padding-left: 0px;
  max-width: 1230px;
}
.row {
  clear: both;
}
.grid::after,
.row::after {
  clear: both;
  content: "";
  display: table;
}
.column {
  float: left;
  padding-right: 0px;
}
.twelve,
.eleven,
.ten,
.nine,
.eight,
.seven,
.six,
.five,
.four,
.three,
.two,
.one {
  width: 100%;
}
/* @media only screen and (min-width:800px) */

.three {
  width: 25%;
  width: -webkit-calc((100% / 12) * 3);
  width: calc((100% / 12) * 3);
}
#front-page-blog .three {
  clear: both;
  float: left;
  overflow: hidden;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 1.5em;
  width: 100%;
}
/* @media only screen and (min-width:1025px) */

#front-page-blog .three,
#front-page-blog .grid-sizer {
  width: 25%;
}
/* @media only screen and (min-width:640px) */

#front-page-blog .gutter-sizer {
  width: 0px;
}
a {
  cursor: pointer;
  text-decoration: underline;
}
a {
  background-color: transparent;
  color: #222;
}
#front-page-blog a {
  text-decoration: none;
}
#front-page-blog a {
  color: inherit;
}
#page > header a,
#page > section a,
#page > div a,
#page > footer a {
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  -o-transition: all .1s linear;
  transition: all .1s linear;
}
#front-page-blog .three > a {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  display: block;
  padding-bottom: .1em;
}
#front-page-blog .three > a {
  border-bottom-color: rgba(34, 34, 34, 0.1);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
address,
form,
fieldset {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a,
h5,
h5 a,
h6,
h6 a {
  clear: both;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  line-height: 1.25;
}
h1 {
  font-size: 1.68em;
}
#front-page-blog .three .entry-title {
  /*.entry-title edits the picture caption font */
  font-family: "Playfair Display", serif;
  font-weight: normal !important;
  margin: 0;
  font-size: 18px;
}
#front-page-blog .three .entry-title {
  font-size: 16px;
  font-weight: 600;
}
#front-page-blog .three .entry-meta {
  /*.entry-meta edits the date font */
  font-size: 14px;
}
#front-page-blog .three .entry-meta {
  font-size: 14px;
}
#front-page-blog .three .entry-title,
#front-page-blog .three .entry-meta {
  display: block;
}
img {
  border: 0;
  height: auto;
  max-width: 100%;
}
#front-page-blog .featured-image img {
  display: block;
}
#front-page-blog .three > a:hover {
  /*a:hover edits the effect of mousing over images */
  border-bottom-color: #222;
  -webkit-box-shadow: 0 1px 0 #222;
  -moz-box-shadow: 0 1px 0 #222;
  box-shadow: 0px 1px 0px #222;
}
#front-page-blog .three > a:hover .featured-image {
  opacity: 0.9;
  /*Edits how faded gallery images turns as you mouse over them */
}
#front-page-blog .banner {
  /*Edits banner size, styling, and positioning */
  font-family: "Playfair Display", serif;
  clear: both;
  width: 100%;
  font-size: 32px;
  /*Edits 'Update' font size, no noticeable effect past 35px */
  margin-bottom: 1.8em;
  font-style: italic;
}

<!DOCTYPE html>
<html class="js" lang="en">
<body class="home page page">
  <div class="hfeed site" id="page">
    <section id="front-page-blog">
      <div class="grid">
        <div class="row">
          <div class="twelve column banner">
            <a href="https://thurstoncdblog.wordpress.com/updates/">Updates</a> 
          </div>
          <!-- .banner -->
        </div>
        <!-- .row -->
        <div class="row posts" style="height: 592.56px; position: relative;">
          <div class="grid-sizer"></div>
          <div class="gutter-sizer"></div>
          <div class="three column post-1" style="left: 0px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/friends/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="12178071_484580551721878_1874327697_n" src="https://thurstoncdblog.files.wordpress.com/2016/09/12178071_484580551721878_1874327697_n.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Friends</h1>
                <span class="entry-meta">
                                                                                                June 19, 2015
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-2" style="left: 300px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/work/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="ss-green-planting-on-deschutes-at-barden-propoerty-4-22-09-10-400x300" src="https://thurstoncdblog.files.wordpress.com/2016/09/ss-green-planting-on-deschutes-at-barden-propoerty-4-22-09-10-400x300.jpg?w=1024&amp;h=768&amp;crop=1"
                scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Work</h1>
                <span class="entry-meta">
                                                                                                July 19, 2015
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-3" style="left: 600px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/house/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="service-day-wss-green-at-bentley-farm-1-2009-016-17-400x300" src="https://thurstoncdblog.files.wordpress.com/2016/09/service-day-wss-green-at-bentley-farm-1-2009-016-17-400x300.jpg?w=1024&amp;h=768&amp;crop=1"
                scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">House</h1>
                <span class="entry-meta">
                                                                                                February 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-4" style="left: 900px; top: 0px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/reflections/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="img_7178" src="https://thurstoncdblog.files.wordpress.com/2016/07/img_7178.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Reflections</h1>
                <span class="entry-meta">
                                                                                                May 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-5" style="left: 0px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/crops/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="p1090841" src="https://thurstoncdblog.files.wordpress.com/2016/09/p1090841.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Crops</h1>
                <span class="entry-meta">
                                                                                                June 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-6" style="left: 300px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/shovels/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="shovels" src="https://thurstoncdblog.files.wordpress.com/2016/09/shovels.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Shovels</h1>
                <span class="entry-meta">
                                                                                                July 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-7" style="left: 600px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/barns/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="barns" src="https://thurstoncdblog.files.wordpress.com/2016/09/barns.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Barns</h1>
                <span class="entry-meta">
                                                                                                August 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
          <div class="three column post-8" style="left: 900px; top: 296px; position: absolute;">
            <a href="https://thurstoncdblog.wordpress.com/field/">
              <div class="featured-image">
                <img width="1024" height="768" class="attachment-photo" alt="p1090869" src="https://thurstoncdblog.files.wordpress.com/2016/09/p1090869.jpg?w=1024&amp;h=768&amp;crop=1" scale="0">
              </div>
              <!-- .featured-image -->

              <div>
                <h1 class="entry-title">Field</h1>
                <span class="entry-meta">
                                                                                                September 19, 2016
                                                                                        </span>
              </div>
            </a>
          </div>
          <!-- .three -->
        </div>
        <!-- .row -->
      </div>
      <!-- .grid -->
    </section>
  </div>
</body>

这是 WordPress 中的视觉问题（在我将 HTML 和 CSS 粘贴到相关位置后）：

Screenshot of issues

对于社区提供的任何建议、技巧或意见，我将不胜感激。

谢谢。

Answer 1

这是我的问题的答案。总结：

感谢 Jacob Goh 的帮助，我想出了如何使用以下行更正图像破坏其 div 容器的方法：

padding:0 !important; margin: 0 !important

在我的代码的几个实例中。

第二个问题是标题周围的填充和每张图片下方的 meta-data。因为我将我的画廊应用于现有的 WP 模板，所以编辑 header 边距数据会扰乱整个网站。这是给你的 "cascading" 风格 sheet。总之，看完之后 this post，我意识到我需要做什么，添加第二套完整的 header ids 和唯一标识符（好吧......我说唯一，我所做的就是使用 "header"。

这是我的代码中已有的内容（这不仅影响了我画廊代码中的 header，而且影响了整个网站）：

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
address,
form,
fieldset {
margin-top: 2.5em;
margin-bottom: 2.5em;
}

此外，这是我需要添加到样式 sheet 中的内容（注意相似之处）：

#header h1,
#header h2,
#header h3,
#header h4,
#header h5,
#header h6,
#header p,
#header ul,
#header ol,
#header dl,
#header address,
#header form,
#header fieldset {
line-height: 1.05em;
margin-top: .1em;
margin-bottom: .5em;
}

我还应该提到，我将所有 HTML 基本代码包含在 div 标识符中：

<div id="header">my code</div>

总之，这就结束了。现在睡觉！

在 css 边距和 div 图像约束方面有问题，希望得到一些建议或提示

Having issues with css margins and div image constraints, would love some advice or tips

html

javascript

css

jquery

margins