Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson, we are going to hang a quotation mark outside a block of text. This method can be used to hang any initial punctuation mark. You need the files quote_hang.html and quote_hang.css from the Exercise folder. Open the HTML file in the browser to see what we're working with. You will see I have already set the quotation marks and the em dash correctly. I've also aligned the heading, the quote, and the footer, and this is creating a strong vertical line.
Dealing a place where this vertical line is weak is right here where the quotation mark is. It's creating a white space, pushing some of the text over. This would be a much stronger line if the D were aligned with the text and the quotation mark hung outside the block of the text, and that's what we're going to accomplish. Hanging a line of text is a two-part process. First, we are going to add margin to the left of the text, moving it over, and then we are going to use a text indent with a negative amount equal to the margin we just added and that will the quotation mark back out.
Let's do it together. In the CSS, find the h2 element. Here we are. Our quote is set as our h2. We are going to add the line margin-left, and we are going to move it over 17 pixels. Let's save and review this in the browser so you can see the change that we just made. We have moved our text over 17 pixels.
Back in the CSS, we can put in a text-indent of -17 pixels. We can save that and review it in our browser and now you can see that the D has moved over and it's aligned with the text and the quotation mark hangs outside that line. But we have a problem. The quote here is no longer aligned with our header. So what we are going to have to do is we are going to have to move this whole block of text over and I will show you how to do that.
Under the h2, you can see that we have a 60-pixel padding left here in our text, but we have just moved everything over 17 pixels. So what we need to do is reduce our padding-left by 17 pixels. Now I'll move everything back over again. So 60-17 is 43. Save and review. Excellent! Now it's all lined up. Great. You can use the text indent anytime you need to hang the first line of text.
Using it to hang punctuation is a great way to emphasize a strong vertical line.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.