CSS填充无法正常工作

Question

 div { position: fixed; width: 100%; height: 88%; padding: 15%; text-align: justify; font-size: 10px; } 

 <div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div> 

Can some1 please explain to me why is this text "leaving" my sight? How can I repair this? Ty

Answer 1

You set the width to 100%, but also add extra padding on top of that .

Try without the width:

 div { position: fixed; /*width: 100%;*/ height: 88%; padding: 15%; text-align: justify; font-size: 10px; } 

 <div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div> 

You could also try box-sizing: border-box; , as explained here , which makes it easier to work with.

Example with box-sizing:

 div { position: fixed; width: 100%; height: 88%; padding: 15%; text-align: justify; font-size: 10px; /* ADD THIS ↓ */ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } 

 <div>FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT FIRST LINE OF TEXT</div> 

Usually, it's more practical to use something like

* {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

... and then just don't have to worry about it. Border-Box is much better than the default "Content-Box"