I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
Related
I have a couple of links that have a margin-left of 3px. These links are underlined and look like that:
<a href='#'>
test
</a>
Unfortunately, there are spaces inside the link and I'm not able to remove these space since I don't have access to the HTML code. These spaces are also underlined, which I'm not happy with. Is there any way to remove them without changing the HTML?
Here is a fiddle that shows my problem: http://jsfiddle.net/e8quz/
Update:
Here is a picture, what I want it to look like:
The spaces come from the line-breaks (well-known from the display:inline-block problematic).
So make your a elements display: block and float them to the left.
DEMO
PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!
See here: http://jsfiddle.net/BWc2U/2/
This will also solve the issue. There is no need to make them floats, with the floats you need to clear the floats otherwise all content after will also be floated etc...
a {
margin-left: 5px;
display: inline-block;
}
You can just float the links to make the white space disappear without editing the html
a {
margin-left: 5px;
float: left;
}
http://jsfiddle.net/e8quz/2/
How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated
DEMO
My HTML
<div class="videoTest">
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
</div>
My CSS
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
}
The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.
.videoTest > video {
display: inline-block;
border:1px solid red;
margin:0;
padding:0;
}
.videoTest {
font-size: 0;
}
By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.
Updated Fiddle
This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.
try this
http://jsfiddle.net/Ng6XU/5/
.videoTest > video{
border:1px solid red;
margin:0px;
padding:0;
float:left;
}
TRY THIS CSS :
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
float:left;
}
I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com
Published April 21, 2012 by Chris Coyier
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav>
One
Two
Three
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
Will result in:
Often highly undesirable (check the link for the output)
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a {
display: inline-block;
margin-right: -4px;
}
Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul>
<li>one
<li>two
<li>three
</ul>
Set the font size to zero
A space that has zero font-size is... zero width.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use #font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
Just float them instead
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird.
Just use flexbox instead
If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.
Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.
video {display: block;}
In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.
I would say that in my case setting this css helped:
height:auto;
How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
Please, take a look to this piece of code:
<span class="something">
<label>test1</label><br/>
<label>test2</label><br/>
<label>test3</label>
</span>
This will create a vertical list of labels. Is possible to do this without the <br> tags using CSS? It is, is possible to show the same vertical aligned label list with this HTML code?:
<span class="something">
<label>test1</label>
<label>test2</label>
<label>test3</label>
</span>
You could do this:
span.something label {
display: block; /* as opposed to display: inline; */
}
This works because by default <label>s are inline elements. If you change them to display block they will display in a list with line breaks between them.
However this is probably a bad way to do what you want. What you really want is an unordered list:
<ul class="something">
<li>test1</li>
<li>etc...</li>
</ul>
To get rid of the bullet points:
ul.something {
list-style: none;
}
Or, without changing the contents of the span to block elements:
span.something label:after {content: '\A'; white-space: pre-line}
See http://jsfiddle.net/VsnKx/
Edit: Another way (if you don't mind floats) is
span.something label {float:left; clear:both}
which doesn't use :after, although it does use floats, which may be undesirable. You also will have to clear the first element after the span.
You can set display:block for the labels, which will adjust them to be displayed on a new line.
Example:
http://jsfiddle.net/niklasvh/eZ8t5/
It is possible. Use this css code:
span.something label{
display:block;
clear:both;
}
Yes, there are several ways, those mentioned in other answers as well as setting label { display: table-row}. However, there is no apparent reason not to use br tags or div containers or a table in HTML, if you want the labels on separate lines, and no apparent reason for wanting that (what is a label without an associated input field?).