Databases
StackOverflow2013
Postsdbo
POStrange padding around text making containing div too large
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStrange padding around text making containing div too large
    primarykey
    data
    text
    <p>I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about: </p> <p><a href="http://i.imgur.com/ZblaLJX.png" rel="nofollow">http://i.imgur.com/ZblaLJX.png</a></p> <p>The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div: </p> <pre><code>.captionCSS { max-width:70%; margin-top:10px; margin-bottom:20px; padding-left:5px; padding-right:5px; padding-top:0px; padding-bottom:0; background-color:#aef7f8; overflow:hidden; color:black; } </code></pre> <p>I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap. </p> <p>Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of: </p> <p><a href="http://i.imgur.com/Ecdxdtq.png" rel="nofollow">http://i.imgur.com/Ecdxdtq.png</a></p> <p>So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser2015125
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI think your issue is the margin you have set. The CSS is not applied to the boxt but the `p` tags in the box. I'm sure if you displayed an example of all your CSS and HTML this would be confirmed.
      singulars
      1. POStrange padding around text making containing div too large
      1. USKevin Lynch
    2. COHave you checked the line-height property?
      singulars
      1. POStrange padding around text making containing div too large
      1. USenr.code
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload