Search code examples
htmlcssmargintumblr

Tumblr adding unwanted padding to posts?

So whenever I code a new Tumblr theme from scratch the post body always adds unwanted padding to the top and the bottom of the caption/body of the post. This does not occur in quote posts and chat posts, but occurs in text, photo, photoset, video, and audio posts. I'm guessing it's something Tumblr does automatically for you, because when I tested a similar code it worked fine and didn't add the extra padding on the top and bottom. How can I fix this problem? Thanks for the help!

HTML:

<div id="holder">
<div class="post">
    <div class="body">
        words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words 
    </div>
</div>

<div class="post">
    <div class="body">
        words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words 
    </div>
</div>

CSS:

#holder {
    position: relative;
    margin: 40px auto 0 auto;
    padding: 20px;
    width: 400px;
    height: 500px;
    background: red;
}

#holder .post {
    margin-bottom: 20px;
    padding: 20px;
    background: green;
}

Tumblr test blog

Solution

  • Are you sure you're talking about padding? I believe what you actually mean is the initial margin the browsers have set for paragraphs (so called User Agent Styles). You can simply remove it like this:

    p {
    margin: 0;
}

    But to keep some space between the paragraphs, you can do this:

    p {
    margin-top: 0;
    margin-bottom: 20px;
}