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
Tyler Cook
4,569 PointsCSS for use instead of <br> tag? Is it bad practice? I'm styling a logo but the clickable link spans across too wide
I have tried to decrease the padding around the link but nothing seems to happen but I can overcome this issue by throwing a line break in the html and css with the display property. So to clarify, is there a way around this using CSS or another solution?
HTML
<a href="#">
<h1>Test</h1>
<br>
<h2>Test</h2>
</a>
CSS
h1,
h2 {
display: inline-block;
}
4 Answers
Robert Stefanic
35,170 PointsThe <br> tag is just a bit redundant.
You can decrease the padding around the <h1> and <h2> element, but that will only effect the space between the content (your text) and the border of your element.
Try reducing the margins on your <h1> and <h2> tags, specifically margin-bottom on your <h1> tag and margin-top on your <h2> tag.
Alternatively, you could pull the <h2> tag "up" by giving the <h1> tag a negative margin. For example:
h1 {
margin-bottom: -20px;
}
Tyler Cook
4,569 PointsYou can really see my issue if you go to Nick's portfolio website that was taught as a course http://treehousewebsite.com. The clickable link is almost halfway across the header, but I've tried to reduce padding on the right but still nothing.
Robert Stefanic
35,170 PointsWell, if you want the link to be clickable halfway across the header like that, you'd have to add in something that stretches halfway across like that. I thought you wanted to add space between your <h1> and <h2> tag. Typically, staying away from <br> tags whenever possible is a good idea.
On the example site that you showed me, the <a> tag (where the <h1> and <h2> tag sit) has an id of "logo". This id has a width of 45%, which is why you can click on the <a> tag that stretches mostly across the top half of the header. You need to ensure that the <a> tag has a large clickable area. As an example, here's the #logo rule on that site:
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
Robert Stefanic
35,170 PointsWell, if you want the link to be clickable halfway across the header like that, you'd have to add in something that stretches halfway across like that. I thought you wanted to add space between your <h1> and <h2> tag. Typically, staying away from <br> tags whenever possible is a good idea.
On the example site that you showed me, the <a> tag (where the <h1> and <h2> tag sit) has an id of "logo". This id has a width of 45%, which is why you can click on the <a> tag that stretches mostly across the top half of the header. You need to ensure that the <a> tag has a large clickable area. As an example, here's the #logo rule on that site:
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
EDIT: My apologizes, I meant to add this as a comment to your response.
Tyler Cook
4,569 PointsWhat I am trying to explain is, I want the extra space to the right of the h1 and h2 gone, in other words for the clickable link to only span across the text of h1 and h2. Thanks
Robert Stefanic
35,170 PointsOkay.
If your style sheet is set up like Nick's, then all you'll need to do is remove the width: 45%; from #logo.
As long as your <a> tag, #logo, <h1>, and <h2> elements don't have any extra width/padding/border rules, then the link will only span your <h1> and <h2> elements.
Just to comment on your OP, reducing padding in this case would not reduce the space to the right of your <h1> and <h2> elements because:
(1.) the content of the <a> tag is what's stretching the space out so far to the right, and it's not the padding (In Nick's case, the padding is 0 for the <a>, <h1>, and <h2>)
(2.) the width is affecting the <a> tag, and not the <h1> or <h2> tags.
Tyler Cook
4,569 PointsAhh I see, I knew it was something simple! Thank you!