I have two pics pic1.png (100px x 20px) and pic2.png (100px x 380px) which each are inside a link and should look like one pic of 100px x 400 px. Unfortunally (at least in Firefox and IE) as a result there is a visible gap of several px between these two pics.
Website-Source (please excuse that I put it all into one line - but I did not want to possibly falsify the exact code by formatting):
<div style="display:inline-block;width:100px;height:400px;max-height:400px"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Can you tell me what is wrong in the above Source and how I could fix it?
The images are being rendered one below the other, as if they were text, in different lines. Thus, the line-height CSS property is causing a visible space within them, in the same way that you expect some spacing between lines of text.
You can solve this by adding line-height: 0; to the style of the div.
See an example: JSFiddle
you should add border="0" attribute to the images, the fact that the browsers add a border of 1 or 2 pixels to the images that are inside an anchor tag and use the default "link" styling, probably you are getting the space between the images.
<img alt="somealt" title="sometitle" src="pic1.png" border="0">
or in CSS file that you're including, this will make that any image inside an anchor tag has no border:
a img { border: 0; }
http://jsfiddle.net/njwx47tg/
Why don't you use float:left? to the a tag?
<div style="display:inline-block;width:100px;height:400px;max-height:400px;margin: 0px; padding: 0px; border: 0px;"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Add:
margin: 0px;
padding: 0px;
border: 0px;
Related
I'm trying to figure out why my image is in a box. I ran a little script that nulls out all the white space in my image, but when I try to use it on my site, my image has a white box around it.
I tried setting margin and padding to 0, I also tried setting the display to block, but still it persists, I appreciate any help, I'm sure this is simple, but I'm not a front end developer unfortunately (:
<div class="img_style">
<a href="link" class="btn btn-lg btn-default">
<img src="imgSrc.png" style="block">
</a>
</div>
Currently the css is empty, but after trying first comment, it looks like this:
#img_style {
style="border: none !important";
}
Remove white space from image
Image inside div has extra space below the image
First remove style="block" in image tag! Its false. Read about class and id, Link this css to your page
First way
.img_style a{
border: none;
}
Second Way
.img_style a{
padding: 0;
border-radius: 0;
}
Third Way
.img_style img{
margin : -10px -15px;
}
I think I found the issue, my link styling was creating the unnecessary space, so I just removed that and it works, I didn't need to add any extra code.
have you tried the border?
style="border: none !important"
Based on in-line styling**
I have a problem with an image on my website and want to get rid of it by modifying the dimensions of it to 1px height and 1px width.
I am trying to do it with css but I have a problem selecting the image because the class of it has empty spaces (class="avatar avatar-96 photo tie-appear"). This is the code of the image when I inspect it:
<span class="dwqa-date">
<img alt="" src="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g" srcset="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g 2x" class="avatar avatar-96 photo tie-appear" height="96" width="96">
<strong>⋅</strong>
22 mins ago
</span>
Do you know how I can get rid of this image? If you know the code you make me a great favor.
Thanks!!
Display: None
Is your friend.
Changing the picture dimensions will still push the other stuff around and make it very ugly on low-resolution-screens.
Your CSS class does not have spaces, each of those is its own CSS class
class="avatar avatar-96 photo tie-appear" can be selected with the css selector .avatar.avatar-96.photo.tie-appear
See this duplicate question: How to select classes with spaces
Edit: I have it set up on this JS Fiddle for you: https://jsfiddle.net/y3s2869g/ You can see the CSS selector is removing the image by setting the display to none. Hope that helps!
Edit again: After reviewing the markup on the site, you can remove the avatar images with the following CSS:
.dwqa-author > img.avatar, .dwqa-comment-author img.avatar {
display:none;
}
You might also want to remove some of the extra padding, CSS similar to this will accomplish that:
li.dwqa-comment {
padding: 15px 20px !important;
}
.dwqa-header div.dwqa-author {
padding-left: 0px !important;
}
.div.dwqa-content {
margin-left: 0px !important;
}
I want to display two images in a div with one at the top and one on the bottom.
I have achieved this but there seems to be extra space especially at the bottom and I don't know where this comes from. When I use Firebug layout it show a height of 61 pixels but my images are only 18x16 and I think that doesn't include padding and margins which are just a few pixels in any case.
What am I doing wrong? Is there a better way to do this?
jsfiddle
<div class="ex6">
<img src="images/uparrow.png" align="top" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="up"><p>
<img src="images/downarrow.png" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="down">
</div>
css
div.ex6
{
padding-top:5px;
padding-bottom:1px;
padding-right:10px;
padding-left:10px;
border:2px;
font-size:0.7em;
border-style:solid;
border-color:#ddd;
margin-top: 8px;
margin-bottom: 2px;
overflow: hidden;
float:right;
background: #eee;
cursor:pointer
}
Your problem lies in the <p> tag you added after the first image. A paragraph has a fixed style that includes a margin/padding after the paragraph. Get rid of it and take care of adding the line break via CSS to make sure the images are shown one below the other.
To achieve this you can for example set the images inside of your image to be displayed as block element:
div.ex6 img { display: block }
If you do that, you will have to add some more styling though to add some more margins, especially between the images. You do could do it like this:
div.ex6 img:first-child { margin-bottom: 5px }
But there are also many other ways, including just using <br /> instead of <p>. I personally don't like using manual line breaks for positioning though.
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
I am creating a form in HTML that will be printed, with fields that need to be written in by the recipient. Basically what I want is a single line that stretches from the end of the field label to the side of the page. Here's how I'm doing it right now:
<table width="100%">
<tr>
<td width="1%">
Label:
</td>
<td style="border-bottom-style:solid; border-bottom-width:1px;">
</td>
</tr>
</table>
This works, but there must be an easier way to do this without needing a whole table element. Any ideas?
Here's my CSS:
span.print_underline
{
display: inline-block;
height: 1em;
border-bottom: 1px solid #000;
}
So your HTML will look like:
<span class="print_underline" style="width: 200px"> </span>
I left the width out, so I could reuse it as much as I want, but you can specify the width.
As a sidenote, I tested the same concept with a div tag instead of span tag, and it did not work in some situations. This is probably because it is semantically incorrect to put a div within a paragraph tag (which is why I used a span), and I generally use paragraph tags instead of using table rows like you've used.
I think your solution is better than the responses thus far. The only thing I'd change about your solution is that I'd use a css class instead of inline.
Your solution will have better alignment than using spans. Your code will look cleaner with table elements than with spans as well.
Also, you might want to consider putting in a textbox in your cell so that your users can input the information directly on the page before printing out.
How about using the span tag?
<span style="border-bottom....">Text</span>
just have a div with appropriate margin to the left. Block-elements by default always expand to the full width.
Meaning:
label {
float: left;
}
div {
margin-left: 10em;
border-bottom: 1px solid black;
height: 1em;
}
<label>label:</label>
<div></div>
it won't stretch the full width between the label and the right side, but you can have the label hide the bottom-border (using background-color or something) and have the div expand all the way to the right aswell (without the margin).
If you want correct semantics, you can even use an input instead of a div, set it's display to "block" and fix the borders and background.