I am having trouble with unwanted extra height added to the anchor tag.
This is the basic code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a style="display: inline-block; padding:0; margin:0;">
<span style="display:inline-block; width:25px; height:25px; background-color: red; padding:0; margin:0;"></span>
</a>
</body>
</html>
and you can test here - http://jsbin.com/cewuza/2/edit
SO how do I remove the unwanted height ? As you can see I have tried modifying the display from inline to inline-block already.
The following demonstrates what the problem actually is:
<a style="display: inline-block; outline: solid blue;">
<span style="display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>
The span element sits on the text baseline, since an inline block behaves like a big (or maybe small) text character. There is some space below the baseline, for descenders of letters like j, g, and q.
To fix this, make the inline block aligned to the bottom of its parent element, using the vertical-align property:
<a style="display: inline-block; outline: solid blue;">
<span style="vertical-align: bottom; display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>
try font-size: 0; on the anchor
edit: didn't see the question comments..
Related
I have some span/div blocks with width and height defined and display set to inline-block but there is some gap between those blocks so i used margin:0px; but there is still gap i have to use negative margin value to remove that gap.
Here is the code i am using
//HTML SPAN BLOCKS//
<body>
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</body>
//CSS//
body{margin:0px;}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
margin:0px;
padding:0px;
}
#1{
background:#FF0004;
}
and i am giving background with id but its not working. Margin between span blocks works is 0 (when set to 0) in internet explorer.
JSFIDDLE
When i add some content(text) in those tags whole layout is messed up . All blocks moves up and down from its position
this space between inline-block elements is caused by font-size of the parent, in your case the BODY element. To fix this issue set font-size of the parent element to 0 then define new font-size inside .pro elements.
Here is the solution without affecting font-size of body element by wrapping content with .clearGaps container.
https://jsfiddle.net/jrv4zp5d/1/
html:
<div class="clearGaps">
<span class="pro" id="1"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
<span class="pro"></span>
</div>
css:
body{
margin: 0px;
}
.clearGaps {
font-size: 0;
}
.pro{
width:300px;
height:300px;
display:inline-block;
border:1px solid #FF0004;
font-size: 12px; /* restore font size after clearing gaps */
}
#1{
background:#FF0004;
}
Good luck
id's that start with a number will not work in css, unless you escape them in your stylesheet (which I wouldn't advise). So I would suggest changing your id to something like #p1 and you should be fine.
inline(-block) elements take whitespace into account. If you remove the whitespace from your markup, or set the font-size to 0, the spacing between the blocks should disappear. Or you could turn them into block elements as well.
And your updated fiddle:https://jsfiddle.net/jrv4zp5d/2/
CSS:
span {
display: inline-block;
}
HTML:
<span>This will have</span>
<span>a gap between the elements</span>
<span>This won't have</span><span>a gap between the elements</span>
originally #Juan G. Hurtado
Alternatively, for a CSS only approach, you can try changing the display of .pro to block and specify a float.
.pro{
width:300px;
height:300px;
display:block;
float:left;
border:1px solid #FF0004;
margin:0;
padding:0;
}
Is there any HTML tag that has big text, similar to h1, but that is also inline displaying? I mean that does not go in a new line.
I guess no other such HTML tag, but you can try this:
DEMO
h1
{
border:1px solid red;
}
.text
{
line-height:0px;
height:auto;
font-size:32px;
font-weight:bold;
border:1px solid red;
}
<h1>Hey There</h1>
<span class="text">Hey There</span>
<h1 style="display: inline;">...</h1> - no new line before;
<h1 style="white-space: nowrap;">...</h1> - no break line inside;
Can't center text vertically with a link, this is my html code:
<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
<p style="">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
I've tried to specify vertical align, to p tag, also tried line-height, but no success, link still is out of position.
jsfiddle : http://jsfiddle.net/85q6wqjx/
You can realize this layout as follows.
First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.
Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.
Third, apply vertical-align: middle to the p element for it to have the
desired effect.
This approach will work with any number of text lines, as demonstrated.
See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/
.panel {
background:#F7C0B9;
width:645px;
height:170px;
margin:0 auto;
outline:1px solid #FFF;
text-align:center;
line-height: 170px;
}
.panel p {
vertical-align: middle;
display: inline-block;
border: 1px dotted gray;
line-height: 1.25;
}
<div class="panel">
<p>Text<br /> Link<br>a 3rd line for example</p>
</div>
If you want the Link under the text but still both in middle:
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;">
<p style="display:inline-block;">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
JsFiddle
Your line-height was pushing it outside the div and the p being a block element was stopping it from going under. You needed to make p an inline-block element.
If you want them both on the same line, remove <br> from the html.
JsFiddle
br is a line break and line-height effects by that.
Please remove <br> tag you will get what you want
and update your code snippet with
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
<p style="margin: 0;">Text</p>
Link
</div>
http://jsfiddle.net/85q6wqjx/10/
Just add following code to your css file
a {
margin-top: -8%;
display: block;
}
give class/id name to anchor tag if you want to add style particular anchor tag
This page shows two images, each contained inside a separate span displayed as an inline block. To the first image is applied the additional style of "display:block", which removes the space between the image and the bottom of its green-bordered span (which space is provided for descenders when an element is styled as inline). Contrawise, this space is visible between the second image (still displayed as inline) and the blue border of the second span.
Why does displaying the first image as a block create space between the first image's span and the element containing the span (orange box)? Is it because when one inline element is contained inside another, the spaces allotted for descenders merge in the manner of vertical margins? Also I am wondering why there is a one-pixel space between the top of the blue span and the orange container.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span>
<span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
</div>
</body></html>
JSFiddle
Whenever there is any whitespace between two inline elements in HTML, the whitespace in will force a gap between them. This happens to your <span> elements because they are inline-elements. This gap can be removed by removing any whitespace between your two span tags, eg:
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg">
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test">
</span>
If your images are not set to display: block, you can remove the extra vertical-space by setting line-height: 0; on your <span> elements.
If you are setting your images to display: block, it seems like your best is to use the vertical-align property to align them with each other; try:
.product_box, #stats { vertical-align: middle; }
It's usually a good idea to use a CSS Reset when developing, to minimize the effect of these browser-defaults.
Updated Code:
HTML:
<div class="shop_box">
<span class="product_box">
<img class="product_image" src="http://i.imgur.com/o2udo.jpg" />
</span><span id="stats">
<img src="http://i.imgur.com/o2udo.jpg" alt="test" />
</span>
</div>
CSS:
.product_box, #stats {
line-height: 0;
vertical-align: middle; }
.product_box {
border: 1px solid green;
display:inline-block; /* to put products side by side */
}
.product_image {
display:block;
}
.shop_box { /* contains shop logo, shop URL, link to view additional items (when not all items are displayed), and all the shop's products */
text-align:center;
border:1px solid orange;
}
#stats {
border:1px solid blue;
display: inline-block;
}
Preview: http://jsfiddle.net/Wexcode/4QNhG/
Edit:
Changing the first image to display block doesn't create the space between the image and the containing element, it was there before.
With regards to the one-pixel space: this is just to account for the border of the other element. Whether or not the first image is display-block doesn't matter:
First span no border: http://jsfiddle.net/A6aLW/3/
Both spans no border: http://jsfiddle.net/A6aLW/5/
i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />