I have the following HTML:
<div class="statistics">
<span class="glyphicon glyphicon-calendar"></span>19/06/2015
<span class="glyphicon glyphicon-eye-open"></span> 18 lectures
<span class="glyphicon glyphicon-comment"></span> 1 commentaire
<span class="glyphicon glyphicon-user"></span> Sébastien Sougnez
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart-empty note"></span>
</div>
I'm applying some CSS style and amongst them, I have this :
.article .statistics span.note {
margin-left:0px;
margin-right:5px;
}
.article .statistics span.note:first-child {
margin-left:25px;
}
The first CSS block is correctly applied, the space between all "note" span is about 5px but I'd like to put a margin-left on the first span with the "note" class of 25px, however, the first-child does not seem to select the element which is weird because I also have this CSS :
.article .statistics span {
margin-left:25px;
margin-right:5px;
}
.article .statistics span:first-child {
margin-left:0px;
}
And here, it works fine, all span are separated by 25px (on the left) except the first one. I guess it has something to do with the class but I looked over the Internet and this seems to be the correct syntax.
Thanks
The first span.note is not the first child of .statistics, so span.note:first-child will not match. The first child is a span that doesn't have the .note class, so only the span:first-child selector without the class will match, on that child element.
Using the technique described here, apply the left margin to all span.note children and then remove it from subsequent ones, instead of trying to apply it separately to the first one:
.article .statistics span.note {
margin-left:25px;
margin-right:5px;
}
.article .statistics span.note ~ span.note {
margin-left:0px;
}
you can straight match the first span.note element, like so
/* when it is exactly the first child of its parent
* (not your specific case)
*/
span.note:first-child,
/* when it is not the first-child, and then is
* preceded by another span whose class is not ".note"
*/
span:not(.note) + span.note {
margin-left: 25px;
}
Codepen Example: http://codepen.io/anon/pen/WvdqbR
You don't seem to understand :first-child. All this selector asks is "Am I the first child of my parent?" - nothing more. None of you span.note fulfills this.
Try important to this property
.article .statistics span:first-child {
margin-left:0px !important;
}
Related
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 made a list with divs, that is displayed fine in Opera, but not in IE.
This is what is happening, in first scene, a line break for some rows, at last span from divs - that contains the class shortcut: http://i.imgur.com/D5wZEdb.png
These are the span and .shortcut styles:
.ui-context-menu .row span{
font-size:16px;
font-family:'Segoe Ui',Arial,sans-serif;
font-weight:400
}
.ui-context-menu .row .shortcut{
float:right;
margin-left:40px;
margin-right:15px
}
In the class row, I did:
.ui-context-menu .row{
display:table;
width:100%;
height:25px;
cursor:default;
padding-right:18px
}
And the class ui-context-menu is a bit normal, but I add a property on to make overflow hidden.
The HTML may turn something so:
<div class="ui-context-menu" data-which="none" oncontextmenu="..." id="context-menu" style="display:none;left:8px;top:50px">
<div class="row able" onmousedown="..." onclick="...">
<div class="base">
<div class="context">
<span>
Load
</span>
<span class="shortcut">
CTRL+O
</span>
</div>
</div>
</div>
</div>
This is an quick fiddle for tests: http://jsfiddle.net/erpngfwv/2/
How can I fix this?
Add this class ".ui-context-menu .row span" float
.ui-context-menu .row span{
float: left;
font-family: "Segoe Ui",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
}
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 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;
}
I have the following code:
<div class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</div>
and this stylesheet:
.filter-field {
height: 20px;
display: inline;
}
.filter-title {
width:90px;
display: inline;
padding-right:10px;
}
.filter-extension {
width: 40px;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
display: inline;
}
but each span is displayed on a new line like this:
Number From
TextBox
To
TextBox
when it's supposed to be something like
Number From [space] TextBox [more
spaces] To [space] TextBox
How can I achieve this through css without changing the tags I'm using? (actually read: without using tables.)
What you have displays inline already, you have some other CSS (that has a more specific selector) creating the block type display. Or...the textboxes (whatever the rendered version looks like) are display: block; themselves.
Those custom ASP textboxes are almost certainly rendering the textbox within a <div>. Adding this to your CSS should do the trick:
.filter-control * { display:inline !important;}
If that textbox control accepts the CssClass attribute, you could also try
.inline { display:inline; }
<dx:ASPxTextBox ID="FilterNumberXXXXXX" runat="server" CssClass="inline" />
Wrap your text in a block-level element such as a paragraph or heading:
<div class="filter-field">
<p>
<span class="filter-title">Number From</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberFrom" runat="server" />
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
<dx:ASPxTextBox ID="FilterNumberTo" runat="server" />
</span>
</p>
</div>
Your styles shouldn't need to be set to inline if they're spans, so your CSS becomes:
.filter-field {
height: 20px;
}
.filter-title {
width:90px;
padding-right:10px;
}
.filter-extension {
width: 40px;
padding-left: 10px;
padding-right: 10px;
}
.filter-control {
}
At worst, you might replace your display: inline; declarations with float: left; but I don't see why you'd need to.
If you are still having problems, I would suggest your span styles are probably inheriting a display: block; property from elsewhere in your CSS.
Try
.filter-field {
height: 20px;
display:block;
overflow:hidden;
}
The problem might be that you actually don't mean to display a box (div) but a paragraph (p). You can do the following and it should work.
In your styles:
.filter-field span{
padding-right:10px;
}
In your markup:
<p class="filter-field">
<span class="filter-title">Number From</span>
<span class="filter-control">
Hello
</span>
<span class="filter-extension">To</span>
<span class="filter-control">
Goodbye
</span>
</p>
Also remember that CSS inherits rules, so the problem could be somewhere else. Using Firebug or any other browser inspection tool could de helpful to determine what's going on.
Use firebug to check which rules are being applied to your elements. As Nick suggested there is probably a more specific selector adding a display: block style to the spans that should be inline by default.
If there is a specific rule (based on an id) you can make your rules more specific by:
Adding an id to your div and making your css rules apply to that id
Finding the applied rule, to which ID it refers, and making your CSS rules apply to that ID:
#the_id .filter-field span {
display: inline;
}