Ghost white space below featured image in Wordpess template
up vote
0
down vote
favorite
I am new to creating Wordpress templates (I'm primarily a front-end developer), and I've created a template that shows the featured image. For whatever reason, it displays white space below the image. The margin and padding is set to 0, so this is a big mystery to me. Here's my template code:
echo '<div class="featured-image">';
the_post_thumbnail();
echo '</div>';
And here's what it's showing:
Image with white space below
If you can see the site, here it is: https://staging.orangesocks.org/this-is-my-story/
html css wordpress-theming
edited Nov 9 at 5:08
miken32
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
add a comment |
up vote
0
down vote
favorite
I am new to creating Wordpress templates (I'm primarily a front-end developer), and I've created a template that shows the featured image. For whatever reason, it displays white space below the image. The margin and padding is set to 0, so this is a big mystery to me. Here's my template code:
echo '<div class="featured-image">';
the_post_thumbnail();
echo '</div>';
And here's what it's showing:
Image with white space below
If you can see the site, here it is: https://staging.orangesocks.org/this-is-my-story/
html css wordpress-theming
edited Nov 9 at 5:08
miken32
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am new to creating Wordpress templates (I'm primarily a front-end developer), and I've created a template that shows the featured image. For whatever reason, it displays white space below the image. The margin and padding is set to 0, so this is a big mystery to me. Here's my template code:
echo '<div class="featured-image">';
the_post_thumbnail();
echo '</div>';
And here's what it's showing:
Image with white space below
If you can see the site, here it is: https://staging.orangesocks.org/this-is-my-story/
html css wordpress-theming
edited Nov 9 at 5:08
miken32
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
I am new to creating Wordpress templates (I'm primarily a front-end developer), and I've created a template that shows the featured image. For whatever reason, it displays white space below the image. The margin and padding is set to 0, so this is a big mystery to me. Here's my template code:
echo '<div class="featured-image">';
the_post_thumbnail();
echo '</div>';
And here's what it's showing:
Image with white space below
If you can see the site, here it is: https://staging.orangesocks.org/this-is-my-story/
html css wordpress-theming
html css wordpress-theming
edited Nov 9 at 5:08
miken32
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
edited Nov 9 at 5:08
miken32
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
edited Nov 9 at 5:08
miken32
22.9k84671
edited Nov 9 at 5:08
miken32
22.9k84671
edited Nov 9 at 5:08
miken32
22.9k84671
22.9k84671
asked Nov 9 at 4:04
Georgia Ferguson
12
asked Nov 9 at 4:04
Georgia Ferguson
12
asked Nov 9 at 4:04
Georgia Ferguson
12
12
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08
add a comment |
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Found the answer. Because an image is inline element, it was adding white space below. Adding display:block to the image fixed the issue.
answered Nov 9 at 5:09
Georgia Ferguson
12
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Found the answer. Because an image is inline element, it was adding white space below. Adding display:block to the image fixed the issue.
answered Nov 9 at 5:09
Georgia Ferguson
12
add a comment |
up vote
0
down vote
Found the answer. Because an image is inline element, it was adding white space below. Adding display:block to the image fixed the issue.
answered Nov 9 at 5:09
Georgia Ferguson
12
add a comment |
up vote
0
down vote
up vote
0
down vote
Found the answer. Because an image is inline element, it was adding white space below. Adding display:block to the image fixed the issue.
answered Nov 9 at 5:09
Georgia Ferguson
12
Found the answer. Because an image is inline element, it was adding white space below. Adding display:block to the image fixed the issue.
answered Nov 9 at 5:09
Georgia Ferguson
12
answered Nov 9 at 5:09
Georgia Ferguson
12
answered Nov 9 at 5:09
Georgia Ferguson
12
answered Nov 9 at 5:09
Georgia Ferguson
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53219714%2fghost-white-space-below-featured-image-in-wordpess-template%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This is not a PHP problem, it's just HTML/CSS. Provide the HTML code that's generated by PHP, and relevant stylesheet rules.
– miken32
Nov 9 at 5:08