I think this padding is always added to all elements, but it is inconvenient for vertical margin calculation because of this padding.
I want to get rid of this padding. What should I do?
div { background-color:DodgerBlue; }
<div>ABCDE</div>
result
Not sure why you want to do that, but anyways, you can use line-height to get rid of the extra spacing at the top and bottom
div {
background-color: DodgerBlue;
line-height: 12px;
}
Demo | Demo 2 (with font-size)
You are getting the spacing on top and bottom of the text as your text is smaller than the containing container. Its actually not a padding (At least padding in terms of CSS).
You could either increase the line height of the text so that the text occupies more space and fits the container, or you could increase the font size to achieve the same.
div {
background-color:DodgerBlue;
line-height: 12px;
}
<div>ABCDE</div>
Related
Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.
Here's a demo with some expected and actual results.
Using the demo:
Open the demo
Enter lots of text in the gray box
Expected result:
The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.
Actual result:
The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.
Other notes:
It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.
You need to do the following:
Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.
If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.
(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)
Here's your JS Fiddle with this fix
In your css you need to give height
p {
padding: 20px;
width: 100%;
background-color: #ccc;
outline: none;
height: 60px;
}
JS Fiddle
I have two div id's. One has has an image in it and the other has a background image. There is an unwanted space in between these two divs. In the dreamweaver design view it appears as if there is no space, but if I make it live or preview in browser the space appears again.
This is the css for the divs
#header {
text-align: center;
padding: 0px;
margin: 0px;
}
#content {
background-image:url(img/ContentBox.png);
background-repeat: no-repeat;
background-position:center;
padding: 0;
margin: 0;
}
This is my body html (ignore the multiple line breaks, this is just so I can see the bg img in the div)
<body>
<div id="header"><img src="img/Header.jpg" /></div>
<div id="content"><br><br><br><br><br><br><br></div>
</body>
Images have a default display setting of inline. This causes them to flow inline with text, vertically-aligned with the baseline. All text is vertically-aligned with the baseline by default as well, unless you change it by setting vertical-align to something else on its containing element.
What is baseline?
The baseline floats above the bottom of the actual line. Look at the lower-case letter g. The bottom of the top circle is the baseline. That's where the images are getting aligned.
You can solve this multiple ways, but here are a couple:
Vertical Alignment
Again, image elements are set to display: inline by default. Assuming you don't want to change this, you need to adjust how the image element aligns vertically on the current line of text.
The vertical-align CSS property sets the vertical alignment of an inline element on the current line of text. It doesn't set it relative to the container.
Therefore, you can set the vertical-align property to middle, top, or bottom, and as long as the image element is larger than the line-height of the current line of text, it will not have the extra space below it.
However, you need to remember what I just said about line-height. In the event that your line-height is larger than your image element, vertical-align will do more than remove that extra spacing: it will actually align the image element on the line accordingly. See this jsFiddle to see an example of how a line-height greater than the height of the image will affect the result.
So, keeping with the HTML that you provided, to set the vertical alignment, you'd do the following CSS rule:
#header img {
vertical-align: bottom; /* or top or middle */
}
Displaying as Block Level
Another option would be to change the image element to display as a block level element. I don't recommend this approach unless you know you want a block level image.
Block level elements automatically fill to their container, and don't flow inline with text or other inline elements. Also, if you set a float on the image, this would force it to be block level.
So, you have two options to display as block level:
#header img {
display: block;
}
or
#header img {
float: left; /* You could float right too */
}
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:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.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;
}
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.
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:
http://i.imgur.com/Ecdxdtq.png
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!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
Have a look at this page. The images on the right should be centered within their divs. But if you look closely, there's a small border of around 3 pixels at the top. And if you disable the overflow: hidden (through firebug or the IE8 equivalent), it sticks out the bottom.
The HTML is this:
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And the CSS, this:
div.small
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
overflow:hidden;
margin:5px;
background-color: #C0C0C0;
float:left;
}
div.small img
{
vertical-align: middle;
max-width:100px;
max-height:100px;
display: inline;
}
What is causing this mysterious gap? I've checked margins and padding, and they don't seem to be the problem.
NB: I'm not completely sure this explanation is correct, but it seems reasonable to me.
First, let's see what the spec has to say on leading and half-leading:
Since the value of 'line-height' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the used value of 'line-height' is called the leading. Half the leading is called the half-leading.
User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12px' high and the 'line-height' value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
So far, so good. So any line boxes within a div.small that have a height less than the div.small's line-height will be vertically centered with the div.small. Now let's look at the vertical-align property, specifically the middle value:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
Note that this is not necessarily the center of the line box! The exact position will change with your choice of font face and size. You can verify this by zooming the text larger and smaller: the size of the gap changes.
As you found, setting font-size: 0 removes the gap entirely. As the font now has no height, the line box gets a leading and half-leading of 50px, with the baseline centered vertically. To render the vertical-align: middle image, the browser sets its midpoint at that baseline, plus the x-height of the font, which is now zero. This gives a vertically-centered image.
Turns out, setting font-size:0; on the div fixes the problem. However, it still doesn't explain the gap. Anyone know what causes the gap?
I cant explain entirely what is happening but after dealing with same problem, it appears it had something to do with the way I was declaring font property in css, e.g.
font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;
= bad for tables apparently. -- I removed that declaration and instead used font-size:11px, line-height:px, font-family, etc, and it fixed the gap!