This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Remove white space below image [duplicate]
(9 answers)
Closed 9 years ago.
I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz.
HTML
<img src="http://placehold.it/150x150" />
CSS
a{
background: red;
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
img {
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
EDIT: I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks
The img element is inline by default. inline elements act as text and default to a vertical-align: baseline. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding vertical-align: bottom OR display: block.
It does this because it's an inline element. Change the display type
img {
display:block;
}
because the image is an inline element by default. Add display: block to your img rule and see.
In your case you need to add display:block, but to the image tag instead of the link tag.
add
img
{
display:block;
}
Related
This question already has answers here:
What is the difference between block and inline-block with width: 100%?
(2 answers)
Closed 4 years ago.
I'm working on HTML.
I tried to center div in parent.
But there's always right margin extended out of the div.
So, now I changed to just a plain text, but it doesn't solve the problem.
How to fix this one?
That margin is because p is a block element.
Add following CSS.
p.myDiv {
display: inline-block;
}
Instead of margin: 0px;
Try margin:0 auto;
Try this one for your code.
<body>
<p class="mydiv">ok</p>
</body>
.mydiv {
width: 20%;
margin: 0 auto;
}
Paragraph is a block level element which takes the entire width by default. If you give width 20% remaining space will be filled with margin. If you don't want the remaining margin use inline block element. Check out w3scholl website for block and inline block elements.
Centering in CSS: A Complete Guide canu you read CSS TRICKS
Centering things in CSS is the poster child of CSS complaining. Why does it
have to be so hard? They jeer. I think the issue isn't that it's difficult to
do, but in that there so many different ways of doing it, depending on the
situation, it's hard to know which to reach for.
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 8 years ago.
I am trying to add a gray bar across an image using css :after
When I try the below the image appears, but not the red box. If I replace the image with a p tag with the same class then it works as expected.
Why can't I see the red box on top of the image?
<div id="wrapper">
<img class="grayborder" src="mad-dogs-eyes.jpg" height="450" width="322" alt="two mad dogs " />
</div>
css:
#wrapper {
width:1000px;
margin:0 auto;
position:relative;
z-index:100;
}
img:after {
content: "";
position:absolute;
width:100px;
height:100px;
background-color:red;
top:100px;
right:10px;
z-index:1001;
}
img elements are replaced elements, you cannot use pseudo elements with them, you will need to apply your after to the parent div #wrapper, or wrap the img in another element
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea> and
. Some elements, like <audio> or <canvas> are replaced elements
only in specific cases. Objects inserted using the CSS content
properties are anonymous replaced elements.
Demo Fiddle
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Good day everyone. I'm a novice with css and I'm trying to float two div tags within one div tag but I'm getting the following
I gave the parent div tag a light grey background so I know something is wrong somewhere as the background has disappeared just after I floated the div tags.
Here's my css below.
.menu.container {
width: 100%;
background-color: #F0F0F0;
}
.category {
float: left;
}
Thanks a lot for your help!
when floating elements the parent container does not recieve information about width or height of the floated elements.
if you just want to align sports and News in a horizinal manner then try the following:
.category {
display:inline-block;
}
"display:inline-block" forms a block element that be on one line with another.
This question already has answers here:
Why does my image have space underneath?
(3 answers)
Closed 7 years ago.
How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?
http://jsfiddle.net/dJVxb/2/
HTML:
<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >
</div>
CSS:
#wrapper {
background:green;
}
img {
display:inline-block;
margin:0;
}
Write vertical-align:top;. Write like this:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Check this http://jsfiddle.net/dJVxb/4/
That added space is there to make room for descenders were there inline text as well. Descenders are parts of letters that reach down, like in 'y' and 'g'.
If you need to retain a vertical-align property of center or baseline, you can fix this by setting your line-height to 0.
I have a div with display:block in my css. This div block uses the align = "absmiddle" . It displays all the elements in 1 line in Chrome. However, in firefox, the elements are displyed on to the next line as well. How do I get them to display in 1 single line in firefox.
P.S: I have already tried display: inline but it does not bring it in 1 line.
<div class="one"><input name="elementone" value="1" align="absmiddle" class="subone" /></div>
Css is
div.one,div.subone{
display:block;
width:16px;
height:100%;
background-position:0 0px;
border:0
}
I'm a little unclear on what you're trying to accomplish - centering input elements in a div?
All you need is a text-align: center on container div that holds all the inputs [.one is the class that should have center text alignment in the case of your example html].
Note there are some issues with your css
div.one,div.subone{ /*div.subone refers to a div with the class subone - not an input like you have*/
display:block; /*divs are already block elements */
width:16px; /* may be the issue, why restrict the width? */
height:100%; /*basically meaningless */
background-position:0 0px; /*default*/
border:0
}
***Note: generally when you are trying to wrap a bunch of inline elements like inputs each inside their own div, there is another way to skin that cat. For instance, in this case if you have a number of divs with the class .one - they will show up on their own line because your css requires each div to display block.
I don't really understand your question but if you want multiple <div class="one"> in one line just float them left or right. However they will still jump to second line once the container div width is exceded. You could try and use a combination of white-space and overflow on the parent div.
But as I say - your problem is quite unclear from the question.