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 CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Posted by Andres Hamilton
Andres Hamilton
7,594 Points

Padding wrap my anchor text to the next line

Hi, all, this is the code

<h1><a href="#">Best City Guide</a></h1>

* {
  box-sizing: border-box; 
}

h1 {
  display: inline-block; 
}

h1 a {
  display: block;
  color: black;
  background-color: white;
  padding: 4%; /*The problem is here*/
}

+So why do i need to change H1 display ? As i said this is just a snippet so just work with the above code as it is !

  • I don't want to delete the universal selector * rule

  • I don't want to change H1 display to inline

  • I don't want touse whitespace: nowrap;

Thanks to everyone, btw this is a snapshot of my workspace if you wanna dig deeper https://w.trhou.se/yu20196ysg

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Do you have a screenshot of the behavior by any chance? When I preview the snapshot with the h1 a rule in place, there is no wrapping.

5 Answers

Andres Hamilton
Andres Hamilton
7,594 Points
Andres Hamilton
Andres Hamilton
7,594 Points

Sorry for that but i'm really pissed off i wasted so many hours and finally the problem was in using percentages '%', all i need to do is use em or rem or px, pfff why is that ?

Andres Hamilton
Andres Hamilton
7,594 Points
Andres Hamilton
Andres Hamilton
7,594 Points

@rydavim thank you for your replay, this is a screenshot http://i.imgur.com/FIvtTBJ.png

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

No Wrapping

That's what I'm seeing, which makes me think it has something to do with the browser. That would be a bit odd, since you're using normalize.css though. I'm using Firefox.

Does your snapshot have the same code you're currently working from? I added the h1 a rule that you posted, but I did not add any other code.

Andres Hamilton
Andres Hamilton
7,594 Points
Andres Hamilton
Andres Hamilton
7,594 Points

yeah that's odd i've previewed the page on microsoft edge the same problem still occurs :(

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

Sorry, I fear I won't be able to help much without being able to reproduce the problem. I would double-check that your current code matches the snapshot you posted, plus the styles in your original post.

I would try inspecting the element if your browser has dev tools. You could also try adding borders to the elements to visualize any extra whitespace or weird behaviors.

Andres Hamilton
Andres Hamilton
7,594 Points
Andres Hamilton
Andres Hamilton
7,594 Points

Yeah Okay, i'll fix the problem then i'll post the solution to help others if they run through it in the future.

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

I think this is a weird layout bug caused by inline-block rendering. Inline-block will cause the element to only be sized by its content, so that is calculated first. When you add the padding, it is a percentage of the parent element, which is the h1, so that shrinks the size inside of the element available to the text causing it to break to a new line.