Text position with "position: absolute"

Question

I'm having a trouble with text positioning. I use "h6" as title for information block. I would like to make from top and left side a 10px gap but I can't make 10px gap from top, thers more than 10px. Left side is fine.

HTML:

<!DOCTYPE html> <html> <head> <title>Sākums</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <div class="container"> <div class="log_me"> <div class="log_inf"> <div class="log_inf_titl"><h6>Uzmanību!</h6></div> <div class="log_inf_tex"><p>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div> </div> </div> </div> </body> </html>

CSS:

@font-face { font-family: OpenSans-Regular; src: url(font/OpenSans-Regular.ttf); } body { background: #f2f2f2; } .log_me { background: #fff; border: solid 1px #e4e4e4; height: 211px; width: 300px; position: absolute; } .log_inf { border: solid 1px #f2f2f2; background: #fff; height: 70px; width: 278px; position: absolute; top: 10px; left: 10px; } h6 { font-family: OpenSans-Regular; font-size: 11px; color: #707070; margin: 0; padding: 0; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: normal; display: block; } p { font-family: OpenSans-Regular; font-size: 11px; color: #707070; margin: 0; padding: 0; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: normal; display: block; } .log_inf_titl { position: absolute; top: 10px; left: 10px; } .log_inf_tex { position: absolute; top: 23px; left: 10px; }

Thankyou, Ričards.

I'm not sure what you are trying to achieve, but it seems that you would be better off with padding/margin rather than position:absolute. The more you can get away from out-of-flow positioning, the better you are! — PookMook
– PookMook, Commented Mar 31, 2016 at 19:51

LcSalazar · Accepted Answer · 2016-03-31 19:55:12Z

I would advise you to rethink your design, as a "gap" is commonly achieved by padding and margin.

But, addressing your specific problem, since you changed the default size of the h6 font, adjust also the line-height:

h6 { font-family: OpenSans-Regular; font-size: 11px; line-height: 11px; /* ... */ }

Roman · Accepted Answer · 2016-03-31 19:54:33Z

Well that code is really not best practise, using so much position:absolue; is bad. I would recommend that you try and fix your code and use padding:10px for your need.

But it will also work with your code, you need to move your text by 10px more from top and also increase the height of the div with the border.

See Fiddle

Absolute positioning is not bad. its just not necessary, here.

gdeleon101 · Accepted Answer · 2016-03-31 20:50:03Z

Not sure why you had the absolute positioning, but use this css.

@font-face { font-family: OpenSans-Regular; src: url(font/OpenSans-Regular.ttf); } body { background: #f2f2f2; } .log_me { background: #fff; border: solid 1px #e4e4e4; height: 211px; width: 300px; padding:10px; } .log_inf { border: solid 1px #f2f2f2; background: #fff; height: 70px; padding:10px; } h6 { font-family: OpenSans-Regular; font-size: 11px; color: #707070; margin: 0; padding: 0; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: normal; display: block; } p { font-family: OpenSans-Regular; font-size: 11px; color: #707070; margin: 0; padding: 0; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: normal; display: block; }

Collectives™ on Stack Overflow

Text position with "position: absolute"

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related