Meaningless Drivel is fun!*
The moose likes HTML, CSS and JavaScript and the fly likes Div text too close to the border Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Div text too close to the border" Watch "Div text too close to the border" New topic
Author

Div text too close to the border

Daniel Thomson
Greenhorn

Joined: Apr 23, 2014
Posts: 1
In testing the div boxes, the text is rendered too close to the border for viewing comfort:



Trying to use padding to give the text spacing, however, forces the divs to expand outside their width:


(On the far right the black dotted lines of the div are outside the red div - the area it's supposed to be inside. The div on the far left is also bigger than normal).

It will break the div boundary even if max-width is set.

I tried to use word-wrap: word-break, however the text still breaks the div's boundaries and makes the text look horrible.


Is there some way in CSS to get the text to move away from the border without increasing the div's size?

Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

box-sizing: border-box;


Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Div text too close to the border
 
Similar Threads
CSS expanding div
div 'overflow:auto;' css question...
center a div inside a div
how to include 2 or 3 buttons within a border or just simply a square?
DIV and CSS Help