Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

emanelbaradei
emanelbaradei
11,395 Points
Posted by 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
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
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
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
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
4,107 Points
KAMRAN IMRANLI
KAMRAN IMRANLI
4,107 Points

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