Question

我已成功将PDF对象存储在我正在处理的本网站的简历部分。但是，我试图将对象的顶部（在本例中是PDF查看器）与标题的底部对齐（在即将到来的屏幕截图中用灰线表示）。我不断在Object的顶部和标题的底部之间获得空格，如screenshot中所示。

以下是相关正文部分的HTML：

html {
    height: 100%;
}
body {
    font-family: 'Playfair Display', open sans;
    height: 100%;

}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%; /* images fill width of parent container
     image will shrink with size of container */
}

h3 {
    margin: 0 0 1em 0;
}

/************************
 HEADING
 *************************/

header {
    position: relative;
    float: left;
    margin: 0 0 30px 0; /* top, right, bottom, left */
    padding: 5px 0 0 0; /* ibid */
    width: 100%; /* since floated, this element does not have an
     explicit width; therefore, it must be assigned to 100%
     of page*/

}


#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Playfair Display', open sans;
    /* font-size: 100px; font-size is overruled in responsive.css
                            for computer screens set in min-width 660*/
    margin: 85px 0;
    font-weight: normal;
    /*  font-weight: normal; will unbold the headline, as headlines
     are set to bold by default. */
    line-height: 0.8em;

}

#header_title {
    position: absolute;
    bottom: 0;
    left: 50px;
    padding: 10px 0;
}

#header_border {
    width: calc(95% - 70px);
    position: absolute;
    bottom: 0;
    margin-left: 50px;

    border-bottom: 2px solid #dddede;
}


/************************
 NAVIGATION
 *************************/

nav {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav > ul > li { /* only impacts the first list items; keeps About, Portfolio, Contacts in horizontal line*/
  display: inline-block;
  position: relative;
}

nav > ul> li> a {
  font-weight: 800;
  padding: 15px 10px;
}

nav > ul > li.subNav ul > li> a {
}

nav > ul > li.subNav ul { /* now free to style/block secondary list*/
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  background: pink;
}

nav ul li.subNav:hover ul {
  display: block;
  text-align: left;
}

/***********************
 * BODY
 */

#resume {
    height: 100%;
    width: 100%;
}

和CSS：

{{1}}

Answer 1

您的标题样式底部边距为30px。删除它，对象将与标题的底部对齐。

margin: 0 0 30px 0; /* top, right, bottom, left */

应该是

margin: 0;

将对象与标题的底部对齐

1 个答案: