HTML Introduction to HTML and CSS Make It Beautiful With CSS Select and Style Multiple Elements by Class

emanelbaradei
emanelbaradei
11,395 Points

Why does the padding of .card-title only changes the top and bottom but not right and left?

I would like to make the padding; property of the .card-title class less from the right and left sides so that the border is not tooo wide for the h2, whenever i try to put a value to it, it only shrinks or expands from top and bottom only, i tried using padding-left and padding-right, but still not working for me. Please explain, i believe it depends on the parent of that class but i don't know how or why.. i need more explanation on this please.

emanelbaradei
emanelbaradei
11,395 Points

/*This is the CSS code of the ".card-title" class */

.card-title { text-align: center; border: 3px solid black; border-radius: 10px; padding: 15px; }

<!-- This is the html part that includes the h2 -->

<main class="flex"> <div class="card"> <h2 class="card-title">Background</h2> <ul> <li><p>I’m an aspiring web designer who loves everything about the web. </li> <li>I've lived in lots of different places and have worked in lots of different jobs. </li> <p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p> </ul> </div> <div class="card"> <h2 class="card-title">Goals</h2> <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p> <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p> </div>

Jason Stewart made a good answer by saying it should be inline-block, it worked with padding but then i found that its not centerd anymore.. i tried setting up margins, but not working.. but anyway, the original question is solved here, i will try to digest this and read more about the display property in order to understand. (This is not all the code of html or css, should i replace it all here??)

2 Answers

Jason Stewart
Jason Stewart
14,860 Points

A shot in the dark here, is the .card-title inline instead of block or inline-block?

I don't think padding affects left and right of inline elements.

Try using display: inline-block; if that is the case.

emanelbaradei
emanelbaradei
11,395 Points

THANKS! Great, your right, but now suddenly its not centered anymore.. is there a reason for having it left aligned although its text-align property is center?

Jason Stewart
Jason Stewart
14,860 Points

Oh ok, use display: block; instead.

This will make it go the full width of it's parent and will allow the text to be centered! :)

KAMRAN IMRANLI
KAMRAN IMRANLI
2,366 Points

But display: block does not resolve the problem. The space between the border and the text is still the same.