This question already has answers here:
How remove border around image in css?
(18 answers)
Closed 9 years ago.
I'm a mobile developer struggling with some HTML works in my app. It looks too easy but I couldn't figure it out:
<html>
<body>
<img src="http://www.reactiongifs.com/r/iwsyih.gif"/>
</body>
</html>
a white border around image appears but I don't want that happen. how to remove it? thanks
try this code please
img{
border:0;
}
You can also add a class for only this image:
img.img{
order:0;
}
<img src="http://www.reactiongifs.com/r/iwsyih.gif" class="img"/>
DEMO
By default the setting of border is medium none color
It's the default padding/margin on the body element. That's the purpose of a 'CSS reset'. Just add this to your styles:
body {margin: 0; padding: 0;}
<img src="http://www.reactiongifs.com/r/iwsyih.gif" style="margin:0px;padding:0px;border:0px"/>
Try:
<img src="http://www.reactiongifs.com/r/iwsyih.gif" style="border:0px;"/>
If you are using css attachment, then:
img{
border:0;
}
If you are using styles in the div itself, then use style="border:0px"
Related
This question already has answers here:
Margin-bottom for <a> link elements
(2 answers)
Closed 2 years ago.
.butn{
text-align:center;
margin-top: 15px;
margin-right: 5px;
color: white;
padding: 10px 15px;
background:black;
background-repeat: repeat-x;
position:relative;
}
<body>
Clear
</body>
What I am working on is href that works like a button function. However, when I try to position this so called "button" with anything margin related like margin-top and margin-right, it does not change the position of this href. So my question is how do I move the position of this (href with padding)
Put the margins in style attribute.
Clear
It seems margins of html <a></a> tag in a style like buttons doesn’t work. I faced the same problem and handled it like this.
I am not clear why this works(!?!). But I shared my experience.
Hope this helps!
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 have a css where I defined a class for the top div with these properties
.topbluebar {
margin:0;
height:19px;
width:100%;
background-image:url('../../Images/top_blue.gif');
clear:both;
}
Here is the simple Html page
<link href="~/Content/Style.css" rel="stylesheet" />
<div class="topbluebar"></div>
<div>Foo foo</div>
Image is appearing but not with the top of browser but with little margin from top which I don't want.
In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.
I have read many answers but none of them worked for me yet.
Try adding the following in your stylesheet.
body { margin:0;padding:0 }
http://jsfiddle.net/z18Lpy99/
Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/
A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.
Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/
*{
margin: 0;
}
Try this
* {
margin: 0;
padding: 0;
}
Basically lots of things in html has default styles which include default values for padding and margins.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
This is css code:
#div_0, #div_1 {
width: 100px;
height: 100px;
display: inline-block;
}
#div_0 {
background-color: #090;
}
#div_1 {
background-color: #900;
}
and this is HTMl
<div id="div_0"></div>
<div id="div_1"></div>
this displayd so:
http://jsfiddle.net/7G63S/
As you see, here is spice between div tags, for delete this space I can write html so:
<div id="div_0"></div><div id="div_1"></div>
and problem resolved:
http://jsfiddle.net/7yE2M/
But intereset, how can delete space between divs with css, if html look like so:
<div id="div_0"></div>
<div id="div_1"></div>
?
or make this impossible ?
P.S. white-space: nowrap not helps in this case.
Set line-height and font-size to 0 on the wrapping container - see http://jsfiddle.net/7G63S/1/
Add the float:left style to the divs #div_0, #div_
Demo here http://jsfiddle.net/7yE2M/1/
Are you wanting the whitespace for source formatting reasons or is this a case of being unable to modify some generated HTML? If you can modify the html, your best bet is to simply eliminate the whitespace, but that doesn't have to mean you need to lose your formatting. Just comment out the whitespace:
<div id="div_0"></div><!--
--><div id="div_1"></div>
Edit: more solutions can be found here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link
example
...<li>
<a href="#link">
<img ...>
</a>
</li> .....
Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. !
edit// I added a picture to better explain what I am talking about.
Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text
To remove it, simply use:
a {
outline: none;
}
Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do
* {
outline: none;
}
This will remove it from all elements.
#link img a
{
border:0;
outline:none;
}
Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.
To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:
Your HTML:
<div id="test">
<a...>
<img .../>
</a>
</div>
And use the following CSS:
#test img {
border-style: none;
}