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

CSS

Posted by Jackson Monk
Jackson Monk
4,527 Points

How can I shorten these paddings?

I am trying to make a little p element that looks like a button with padding. When I use padding, it defaults to the padding being long enough to take up the whole screen. I was wondering, is there a way to shorten one side of the padding? (Element must stay centered)

Here's my css for the element:

.blue-text {
   padding-top: 15px;
   padding-bottom: 15px;
   border-radius: 5px;
   background-color: #3BA99C;
}

And here's the html element:

<p class = blue-text>Add Comment</p>
Josh Nichols
Josh Nichols
11,382 Points
Josh Nichols
Josh Nichols
11,382 Points

I added my answer below. Sorry, placed it here in the wrong spot!

3 Answers

Josh Nichols
Josh Nichols
11,382 Points
Josh Nichols
Josh Nichols
11,382 Points

A good article on how the display property works: https://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Understanding the display property is a good foundation for CSS.

Josh Nichols
Josh Nichols
11,382 Points
Josh Nichols
Josh Nichols
11,382 Points

The <p> tag is a block level element. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

To make the <p> tag work like a button, you need to give it a width and make the left and right margins have a value of auto.

Most of the time, you would make elements that look like buttons a link (a) or a button element inside a p tag. Those are an inline element and will style more like you are trying to do. Tip: You can make the a or button elements inline-block and have an easier time styling their top and bottom padding.

Here's an example of both ways. I would recommend the example2 approach. 

 <p class="example1">Element Text</p>
 <p class="example2"><a href="#">Element Text</a></p>

 <style>
    p.example1 {
        background: #ccc;
        color: #222;
        border: #bbb solid 1px;
        padding: 1rem;
        text-align: center;
        margin-bottom: 2rem;
        /* Needs a width and left/right margins set to auto*/
        width: 200px;
        margin-left: auto; 
        margin-right: auto;
    }

    p.example2 {
        text-align: center;
    }
    p.example2 a {
        display: inline-block;
        background: #ccc;
        color: #222;
        border: #bbb solid 1px;
        padding: 1rem;
        text-align: center;
        text-decoration: none;
    }
 </style>
Jackson Monk
Jackson Monk
4,527 Points
Jackson Monk
Jackson Monk
4,527 Points

Thank you very much, I appreciate all the help but you did more than was needed. I don't need the p element to be a button, I just need it to look like one