I'm trying to increase the bottom padding of my headline in my blog and for some reason it is not being possible.

This is the code that I'm writing to increase the padding:

.post .type-post .entry-content h1.entry-title{
    padding: 0 0 50px;
}

Entry-title and Entry-content are the classes for H1 element.

Here is the link of the page where this issue exist -> https://www.writtenlyhub.com/writing-product-description/

I think this will help you in understand my problem better.

Please do help me out here.

Thanks

CodePudding user response：

Simplest would be to use padding-bottom: 50px; If you are using expanded shorthand, remember, it's either padding: vertical horizontal or padding: Top, right, down, left There is no version with 3 parameters like you have.

While there is nothing wrong in using shorthand, there is a recent video from Kevin Powell explaining some gotchas, I recommend you should watch it and some other videos on his channel.

CodePudding user response：

.post .type-post would select an element with the class type-post, that is a descendant of an element with the class post - but you don't actually have that in your structure.

You have one element that has both classes - so the spacing between the two classes in your selector needs to be removed,

.post.type-post .entry-content h1.entry-title{
    padding: 0 0 50px;
}