Align element left exactly

Question

I want to align heading and paragraph element exactly left. Is there any standard method to do this or I just need to play with padding-left.

 @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); *{ font-family: 'Lato', sans-serif; box-sizing:border-box; margin:0; } h1{ font-size:100px; } p{ font-size:21px; } body{ padding:100px; } 

 <p>Hello, I am</p> <h1>K. Boozer</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p> 

Answer 1

Use some negative margin-left on the h1. The space there occurs because the font size is so large and every font has its own different letter sizes.

 @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); *{ font-family: 'Lato', sans-serif; box-sizing:border-box; margin:0; } h1{ font-size:100px; margin-left: -6px; } p{ font-size:21px; } body{ padding:100px; } 

 <p>Hello, I am</p> <h1>K. Boozer</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p> 

About negative margins:

https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/

They are extremely valid CSS

I'm not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” 'Nuff said. Check out the article for more details.

Negative margins are not a hack

This is especially true. It's because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.

Answer 2

I think the problem is with your font as it looks as if it is starting the letters slightly off to the right.

You can combat this with using text-indent - if you use something like -0.1em then it should get rid of the left padding of the letter no matter it's size:

 @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); * { font-family: 'Lato', sans-serif; box-sizing: border-box; margin: 0; } h1 { font-size: 100px; } p { font-size: 21px; } body { padding: 100px; } * { text-indent: -0.08em; } 

 <p>Hello, I am</p> <h1>K. Boozer</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p> 

The only problem with this approach is that if the text goes over 2 or more lines, the subsequent lines won't have the indent

Answer 3

You can use position: absolute; in your css file to make the element appear exactly where you want it to. Then define left: 0px; or what ever you want that to be. Hope that helps.

see http://www.w3schools.com/cssref/pr_class_position.asp

Answer 4

Try this instead with padding top on body css

 @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); *{ font-family: 'Lato', sans-serif; box-sizing:border-box; margin:0; } h1{ font-size:100px; } p{ font-size:21px; } body{ padding-top:100px; } 

 <p>Hello, I am</p> <h1>K. Boozer</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio dolorum nihil voluptatum repudiandae suscipit, excepturi modi quia ratione aliquid ullam esse, qui, culpa officiis natus dicta adipisci provident facilis.</p>