我正在努力增加每个文章标题与我网站上的文章图片之间的差距。 （WordPress的）
我尝试了所有的margin / padding变体 - 在header（h2）类和图片类中的top / bottom ......没有用。
可能是什么原因？谢谢你的帮助！
网址http://sparschweinkiller.de.w0127d50.kasserver.com/
的index.php：
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<div id="post-area">
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="gridly-copy"><div><h2><a href="<?php echo get_post_meta( get_the_ID(), 'afflink', true); ?>" target="_blank"><?php the_title(); ?></a></h2></div>
<?php if ( has_post_thumbnail() ) { ?>
<?php $image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id(), 'summary-image' ); // returns an array
?>
<div class="gridly-image">
<img class="wpimagehover alignnone wp-image-<?php echo get_post_thumbnail_id() ?>" src="<?php echo $image_attributes[0]; ?>" alt="" width="300" height="250" data-fburl="<?php the_permalink() ?>" data-tweeturl="<?php the_permalink() ?>" data-pinurl="<?php the_permalink() ?>" data-stumbleuponurl="<?php the_permalink() ?>" data-sstyle="circle" data-sharetxt="<?php echo get_the_excerpt(); ?>" data-animation="fade" />
</div>
<!-- <div class="gridly-category"><p><?php the_category(', ') ?></p></div>
-->
<?php } ?>
<!-- POS TITLE -->
<!-- <p class="gridly-date"><?php the_time(get_option('date_format')); ?>
</p> -->
<div> <?php the_content('(Mehr lesen...)'); ?> </div>
<!--Preis Anzeige -->
<div class="price">
<p><?php echo '<div class="price">'. get_post_meta( get_the_ID(), 'preis', true).'</div>'; ?> </p></div>
<!--Sparschwein killen button -->
<div class="sparbutton">
<p style="text-align: right;" >
<?php
$linkadress = get_post_meta( get_the_ID(), 'afflink', true);
echo do_shortcode( '[otw_shortcode_button href="' . $linkadress. '" size="medium" icon_position="left" shape="radius" target="_blank"]Sparschwein Killen[/otw_shortcode_button]' ) ?>
</p>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php endif; ?>
<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>
<?php get_footer(); ?>
CSS：
/* colour styles : light */
body { background: url(../images/light/bg.jpg) repeat #FFF; font-size:12px; line-height:20px; font-family: 'Droid Sans', sans-serif; }
#wrap { width:94%; margin-left:3%;}
/* font styles */
h1 { font-size:36px; line-height:41px; color:#000000; padding:0px; margin:0px; font-weight:bold; padding-bottom:5px; padding-top:5px; }
h2 { font-size:20px; line-height:23px; color:#000000; padding:0px; font-weight:bold; text-align:center; margin-bottom: 10; }
h3 { font-size:15px; line-height:25px; color:#858585; padding:0px; margin:0px; font-weight:normal; }
h4 { font-size:15px; line-height:25px; color:#000000; padding:0px; margin:0px; font-weight:normal; font-weight:bold; }
h5 { font-size:13px; line-height:22px; color:#000000; padding:0px; margin:0px; font-weight:normal; }
h6 { font-size:12px; line-height:22px; color:#858585; padding:0px; margin:0px; font-weight:normal; }
p { font-size:12px; color:#454545; line-height:22px; margin:0px; padding:0px; padding-top:8px; padding-bottom:8px; font-family:'Helvetica',Arial, Helvetica, sans-serif; }
/* list Styles */
ul { padding:0px; margin:0; margin-left:0px; font-family:'Helvetica',Arial, Helvetica, sans-serif; margin-top:10px; }
ul li { font-size:12px; color:#858585; padding-left:10px; margin-bottom:7px; list-style:inside; list-style-type:square;}
ol { padding:0px; margin:0; margin-left:25px; font-family:'Helvetica',Arial, Helvetica, sans-serif; margin-top:10px; }
ol li { font-size:12px; color:#858585; padding-left:10px; margin-bottom:7px; list-style-type: decimal; }
hr { background:url(../images/hr.jpg) top center no-repeat; border:0; outline:0; clear:both; height:10px;}
/* link styles */
a:link {color:#444444; text-decoration: none;}
a:visited {color:#444444; text-decoration: none;}
a:hover {color:#000000; text-decoration: none;}
a:active {color:#444444; text-decoration: none;}
a:focus {outline-style: none;}
/* header nav styles */
#header { width:100% }
#logo { margin-top:35px; margin-bottom:15px; }
#nav { width:100%; background:url(../images/light/bg-row.png) top left repeat-x; height:57px; overflow:hidden; }
#nav ul { display: inline; list-style: none; margin:0px; padding:0px; height:42px; line-height:42px; clear:both; }
#nav ul li { float: left; display: inline; font-size: 12px; margin:0px; padding:0px; }
#nav ul li a { display:block; height:42px; margin-right:20px; text-decoration:none; margin-top:10px; }
#nav ul li a:hover { }
/* footer styles */
#footer-area { width:100%; display:inline; float:left; padding-top:10px; margin-top:20px; clear:both; background:url(../images/light/bg-row.png) top left repeat-x; }
#footer-area .widget { width:310px; margin-right:10px; padding-top:15px; display:inline; float:left; font-size:12px; color:#454545; line-height:18px; font-family:'Helvetica',Arial, Helvetica, sans-serif; }
#footer-area .widget h3 { color:#858585;}
#footer-area .widget p { color:#000;}
#footer-area .widget ul { margin-left:0px;}
#footer-area .widget li { color:#858585; }
#footer-area .widget a { color:#444444;}
#footer-area .widget a:hover { color:#000;}
#footer-area .widget-copy { width:280px; overflow:hidden; display:inline; float:left; margin-left:10px;}
/* copyright styles */
#copyright { clear:both; width:100%; background:url(../images/light/bg-row.png) top left repeat-x; display:inline; float:left; margin-top:20px; margin-bottom:20px; }
#copyright p { padding-top:15px; color:#4f5356; font-size:12px; }
#copyright a {color:#858585; text-decoration: none;}
#copyright a:hover {color:#000000; text-decoration: underline;}
/* post and page styles */
.type-post { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; position:relative; }
.type-page { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
.type-attachment { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
.gridly-image { margin-top:10; }
.gridly-category { position:absolute; width:auto; background:#000; margin-top:-35px; z-index:10; height:30px; overflow:hidden; left:0;}
.gridly-category p { margin:0; padding:0; line-height:30px; padding-left:20px; padding-right:40px; color:#fff; font-style:italic; }
.gridly-category a { color:#fff; font-style:italic;}
.gridly-category a:hover { color:#555;}
.gridly-copy { width:710px; margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:20px; overflow:hidden }
.gridly-date { width:150px; color:#8e8e8e; font-size:11px;}
.size-full { width:100%; height:inherit;}
.price { font-size:24px; color:#8e8e8e; }
.sparbutton { position:absolute; z-index:1; }
/* post index styles */
#post-area .post { width:320px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; position:relative; }
#post-area .post .gridly-copy { width:300px; margin-left:auto; margin-right:auto; padding-top:10px; paddingbottom:20px; overflow:hidden; clear:both;}
#post-area .post .gridly-date { width:150px; color:#8e8e8e; font-size:11px; border-bottom:1px dotted #cccccc; padding-bottom:0; padding-top:0; }
#post-area .post .gridly-link { width:150px; border-top:1px dotted #e8e8e8; color:#494e51;}
/* single post nav styles */
.post-nav { width:35px; display:inline; float:left; margin-left:10px; margin-top:15px; }
.post-next a { background:url(../images/btn-left.png) top left no-repeat; height:35px; width:35px; display:inline; float:left; text-indent:-9999px; }
.post-next a:hover { background:url(../images/btn-left.png) top right no-repeat; height:35px; width:35px;}
.post-prev a { background:url(../images/btn-right.png) top left no-repeat; height:35px; width:35px; display:inline; float:left; clear:both; text-indent:-9999px;}
.post-prev a:hover { background:url(../images/btn-right.png) top right no-repeat; height:35px; width:35px;}
/* comment styles */
.comments-area ol { list-style:none; margin:0; padding:0; border-bottom:1px solid #8e8e8e; }
.comments-area li { list-style:none; margin:0; padding:0; border-top:1px solid #8e8e8e; width:100%; clear:both; display:inline; float:left; margin-bottom:10px; padding:10px; }
.avatar { display:none;}
.reply { display:none;}
.comment-meta { display:none;}
.comment-author { font-size:16px; font-weight:bold; font-family: 'Droid Sans', sans-serif; }
#comment-form { width:50%; }
.text-input { clear:both; border:1px solid #8e8e8e; margin-bottom:5px; width:90%; padding:7px; font-family:Arial, Helvetica, sans-serif; color:#555; font-size:12px; }
.comment-input { clear:both; border:1px solid #8e8e8e; margin-bottom:5px; width:90%; padding:7px; font-family:Arial, Helvetica, sans-serif; color:#555; font-size:12px; }
.comment-submit { clear:both; width:120px; height:30px; line-height:25px; background:#e5e5e5; border:1px solid #8e8e8e; }
/* Additional and WordPress styles */
.clear { clear:both;}
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right:20px; margin-top:20px; margin-bottom:10px; }
.alignright { float: right; margin: 0 0 20px 20px; }
.wp-caption { text-align: left; margin-top:5px; margin-bottom:5px; }
.wp-caption-text { margin-top:2px; text-align:left; font-style:italic; font-size:11px; color:#999; }
.sticky {}
.gallery-caption {}
.bypostauthor {}
blockquote { font-size:2em; line-height:23px; color:#000; margin-left:20px; border-left: 1px dotted #999; padding-left:25px; margin-top:15px; margin-bottom:15px; }
/* end of css file */
答案 0 :(得分：0)
你的风格是
.gridly-image {
margin-top: 10;
}
你在10之后缺少px。它应该是
.gridly-image {
margin-top: 10px;
}
您需要指定px，否则浏览器不知道您希望它是10px，10%还是10em。
答案 1 :(得分：0)
您错过了px的格式，请将.gridly-image
.gridly-image {
margin-top: 10px;
}
答案 2 :(得分：0)
你也可以在h2风格上使用margin-bottom，它与填充的操作相同。
h2 {
font-size: 20px;
line-height: 23px;
color: #000;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}