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;
}
Related
This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.
I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...
<html>
<body>
<style>
.link-bubble {
float:none;
white-space:nowrap;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.
Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.
Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.
<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}
.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
Suppose we have the following element:
<div>STACKOVERFLOW</div>
And we want to make the A red, but without changing the kerning properties of the word. In other words we want the word to display exactly the same way it did before. There is a similar question here:
change-color-of-one-character-in-a-text-box-html-css
However using a span element changes the kerning properties of the word (Adds more space in front of the A).
Here's a screenshot from the jsfiddle in the referenced SO question
As you can see it looks like the span element adds a little more space.
Update
I'll add a screenshot along with some code to show what I mean. If you look at the word ICON in the screen shot it is marked up like this (And the spans are causing additional space to be added):
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
<span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
<span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span></h1>
div { font-size: 3em; background: blue; display: inline-block; }
span { color: red; }
<div>STACKOVERFLOW</div>
<div>ST<span>A</span>CKOVERFLOW</div>
<img src="https://i.stack.imgur.com/EjnDF.png">
Per request in the comments color utilities come from SuperflyCSS Color Utilities
The font utilities come from the SuperflyCSS Font Utilities
And the u-text-uppercase utility comes from The font utilities come from the SuperflyCSS Format Utilities
Another Update
Thanks you guys - The key - as mentioned in the accepted answer, is to keep the <span> elements on the same line. When I do that is done this is the result:
You just need to keep it on one line!
You could use:
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span><span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span><span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span><span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
or:
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic<span class="u-text-color-md-pink-a200">o</span>n</span>
Or you could just use font-size: 0 on parent & reset its children font-size or use float: left and a
.third { font-size: 0; }
.third span { font-size: 16px; }
.fourth span {
float: left;
}
<strong>First:</strong><br>
<span class="first">Ic<span>o</span>n</span> <span>Utility Tests</span>
<br><br>
<strong>Second:</strong><br>
<span class="second">
<span>Ic</span>
<span>o</span>
<span>n</span>
<span>Utility Tests</span>
</span>
<br><br>
<strong>Third:</strong><br>
<span class="third">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span>Utility Tests</span>
</span>
<br><br>
<strong>Fourth:</strong><br>
<span class="fourth">
<span>Ic</span>
<span>o</span>
<span>n </span>
<span> Utility Tests</span>
</span>
I think this should helpful for you. Please try this. To avoid extra space I have used font-size:0 to h1 tag because span tag have taken default property display:inline-block.
h1{
text-transform:uppercase;
font-weight:normal;
font-size:0;
}
.u-text-color-md-pink-a200{
color:#FF4081;
}
.u-font-weight-900{
font-weight:bold;
}
h1 span{
font-size:30px;
}
<h1>
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">Ic</span>
<span class="u-text-uppercase u-text-color-md-pink-a200 u-font-weight-900">o</span>
<span class="u-text-uppercase u-text-color-md-grey-900 u-font-weight-900">n</span>
<span class="u-text-uppercase u-text-color-md-grey-800 u-font-weight-100">Utility Tests</span>
</h1>
You can still use <span>, and apply a negative margin on it.
#one{
color:#ff0000;
}
#two{
color:#ff0000;
margin:0 -0.04em;
}
div {
font-size: 3em; background: blue; display: inline-block;
}
<!--Old Span-->
<div>ST<span id="one">A</span>CKOVERFLOW</div>
<!--New Span-->
<div>ST<span id="two">A</span>CKOVERFLOW</div>
<!--Original-->
<div>STACKOVERFLOW</div>
I'm trying to align text of different sizes on different levels. See the image below to see what I want:
Here is the code I'm trying but it does not seem to work.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:text-top; font-size:14px;">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span style="font-size:14px; vertical-align:bottom;">/month</span>
</div>
Any help would be really appreciated!
You can specify the line height of the spans as well, and therefore influence the vertical alignment.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:top; font-size:14px;">$</span>
<span style="font-size:30px; line-height:27px; vertical-align:bottom;">199</span>
<span style="font-size:14px; line-height:16px; vertical-align:bottom;">/month</span>
</div>
You can use the positions and top css attributes to solve the miner alignment issue in your code. See the updated code. Recommending to write the style alone (Instead of inline styles). The given style (top: 'value';) the following code may change based on the overall style which you are planing to give (same as like the picture with the question)
<div>
<span class="dlr">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span class="perd" >/month</span>
</div>
.dlr{
vertical-align:text-top;
font-size:14px;
position:relative;
top:6px;}
.perd{
font-size:14px;
vertical-align:bottom;
position:relative;
top:-4px;}
Here are the Demo
Try:
.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}
With:
<div>
<span class="a">$</span>
<span class="b">199</span>
<span class="c">/month</span>
</div>
http://jsfiddle.net/z03cynrp/1/
HI now used to this after or before css property as like this
div > span{
position:relative;
display:inline-block;
vertical-align:top;color:#fff;
}
div > span:after{
position:absolute;
content:"$";
font-size:14px;
top:4px;
left:-6px;
}
div > span:before{
position:absolute;
content:"/month";
font-size:14px;
bottom:3px;
right:-38px;
}
div{background:blue; padding:20px 0; text-align:center;}
<div>
<span style="font-size:30px; vertical-align:top;">199</span>
</div>
This has to do with the fact that all the three of them do not have the same line-heights. I could modify your code to align as you wanted.
span {
line-height: 32px;
}
<div>
<span style="font-size:14px; vertical-align:text-bottom">$</span>
<span style="font-size:30px;">199</span>
<span style="font-size:14px;">/month</span>
</div>
PS: Dont use inline style unless you absolutely have to
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..
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/