In CSS, I can set an outline width outline: 1px solid red and I can set its offset (similar to padding) with outline-offset: 5px.
However, this method does not allow for the shorthand method used by padding, like border: 1px 2px 3px 4px and there doesn't seem to be an outline-offset-left: 1px option.
So, is there a way to set different offsets on each side for a CSS outline? Note that I don't want to use padding; it would offset the outlines how I'd like, but it would also add extra padding to elements where I don't want to, which is the whole reason I am using outline in the first place.
According to MDN's docs on Outline, the only properties to set on outline are:
outline-style
outline-width
outline-color
To which outline is a shorthand to concatenate those properties. But there's no side definition, due to the following fact:
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this...
Since they may not be rectancular, it wouldn't make sense to be able to define left, top, etc, properties...
There is a nice hack you can do to achieve the effect you are after, but it probably has to be done on a case-by-case basis.
My scenario was that I had some content with padding, which contained several html elements including some anchors/links. Let's imagine the scss is something like this:
.contanier {
padding: 15px;
> a {
padding: 8px 0;
}
}
When focusing on an anchor the outline is pretty much touching the text and generally looks poor. Now, as you said, adding left/right padding to the anchors for the sake of an outline would throw off the layout of the content. The anchors would no longer appear inline with other elements in the container such as a heading/paragraph/image/what have you.
So to resolve the problem I added padding to the anchors, and negated it by setting a negative margin:
> a {
margin: 0 -4px;
padding: 8px 4px;
}
Now I have complete control of how the focus appears. There are some use-cases where this solution does not work, for example, if your anchors have a background colour. But for most cases it works pretty well.
Related
I need to display data containing Unicode full block characters (\u2588). However, as you can see here, browsers seem to apply font smoothing to the blocks causing gaps to appear between the blocks. ██████████████
How can I render these characters without the gaps?
I tried using CSS 'line-spacing' with a negative value as a hack, but this text is being rendered with a mono-space typeface and it throws off alignment with the rest of the content.
I have the same issue for a long time and still searching for a perfect solution. CSS text-shadow method by Kieran Devlin is good, but only for cases when there is only one-line blocks with same color.
I can suggest this solution via JavaScript (or just CSS) tho this is not 100% perfect. Here we just making sure that user is on Chromium and then squashing blocks together into each other, therefore filling the gaps. After that, we can use transform scale to return initial size and transform translateX to return it to it's initial position.
if (window.chrome) {
art_div.css({
'letter-spacing': '-0.1em',
'line-height': '1.2em',
'transform': 'scale(1.2, 1) translateX(8%)'
});
}
You can see it visualized in my GitHub issue, maybe i will find something better.
You can use font shadow to fill the gap. I know its a hack but unless you plan to overlap the characters by positioning them in a fixed orientation I don't see how this can be achieved across different browsers.
text-shadow: 1px 0px 0px rgba(0,0,0,1);
Example:
body {
text-shadow: 1px 0px 0px rgba(0,0,0,1);
}
██████████████
Another option is to pad the characters within a container and set the background color the same as the font color. Example:
#container {
background: black;
color: black;
width: 159px;
height: 20px;
}
<div id="container">
██████████████
</div>
This is my first time using HTML with CSS inline style. Basically I am trying to use a div tag with an inline style to cause it to have a double lined border and one half of a letter width padding offsetting the text.
I thought maybe I should start the div tag using an inline style rule, and a double border. For example:
<div>
<div style=border:double;padding:0em,3px></div>
Is that a correct approach?
You can use <hr> to create a horizontal rule and style it to make it double lined.
hr {
padding: 0em 3px;
border: none;
border-top: double #000;
color: #000;
}
if you want to use inline ,just use it like this
<div style="border:4px double black;width:200px;height:200px;"></div>
First of all, you should always put quotes around attribute values. There is no reason not to. (Originally, quotes were meant to be omittable around simple values, for instance height=30, never around phrases that contained colons and semicolons and greater-than signs and stuff...)
Also, you have an error in the paddings: those are not separated by commas.
Then if you use the border notation, which is a shorthand for border-width, border-style and border-color, the browser will choose default values for the properties you don't specify. In this case, medium for the border-width and currentColor for the border-color. If that is what you had planned, OK. But if you don't know beforehand how thick a medium border is exactly, you should provide a width yourself.
See MDN.
For double borders, multiples of 3px work best, since that's what you need minimally (1 px for each of the lines and 1 px in between). With other widths, different browsers may divide the widths differently, so that you may get thicker lines and less space in between on some browsers than on others.
Edit:
WRT the comment, if you want the div to take up the right half of the window, you can do something like this. Using a left margin of auto and a right margin of 0, the div will be flushed to the right.
Note that I also used a padding of .5ch for "one half of a letter width", which is better than 3px hardcoded.
.styled {
border:3px double;
width:50%;
padding:.5ch 0;
margin:0 0 1em auto;
}
<div class="styled"></div>
<hr/>
Or, if using a float is more desirable:
.styled {
border:3px double;
width:50%;
float:right;
padding:.5ch 0;
margin-bottom:1em;
}
.styled + * {
clear:right;
}
<div class="styled"></div>
<hr/>
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
Here's an example of code to place a border around span tags on hover:
CSS
p {
background-color: #def;
width: 137px; /* chosen so the text *just* fits, may need to alter
* for different browser or OS
*/
}
span {
margin: 0;
}
span:hover {
margin: -2px;
border: 2px solid #336;
}
HTML
<p>
<span>hover</span> <span>over</span> <span>the</span> <span>words</span>
</p>
(See demo at: http://jsfiddle.net/sS7vY/)
It uses a -ve margin to compensate for the border and avoid the text shifting position on hover.
On Firefox, hovering over the very last word causes it to wrap over to the next line, which I want to avoid. On Chrome it behaves as I intended and never wraps.
Is this a Firefox bug that needs reporting?
Is there a way to prevent this wrapping in Firefox, in a way that works for arbitrary text? (i.e. adding a couple more pixels width to the outer <p> is not a valid solution!)
Not sure if it's a bug in either browser as I'm not familiar with the inline box model, but using an outline instead of a border seems to work well as outlines don't affect box sizing, even on inline-level boxes:
span:hover {
outline: 2px solid #336;
}
I forded a working solution of your's : jsfiddle.net/dgY4J
It seems to be a mixed of 'box-sizing' and available width situation.
Also, if you use the css box-sizing, you won't have to deal with borders with the negative margins.
One last tip : chosen so the text just fits, may need to alter for different browser or OS || it will do the oposite. No browsers render font type the same.
Here's an example: http://jsfiddle.net/JPQxX/
I tried this in Chrome and FF. In both browsers there's a 1-2px margin between the two inputs. I want to make the two elements touch without explicitly shifting the submit button to the left. Margin is already set to 0px;
Reset the border style and it should work http://jsfiddle.net/JPQxX/1/
input { border: 1px solid grey; }
The elements do touch, without a margin. If you inspect the submit button element in Firebug, you’ll see that it has no margin but a border that is 3px wide. What seems to be a small margin is part of the border. If you take a screen capture and magnify, you can see that the border has a 1px wide gray part with 1px wide transparent parts on each side of it, except at the rounded corners.
The default border is drawn by built-in routines in browsers, and modern browsers tend to use this kind of routines. If you set border properties for the button in CSS, browsers tend to switch to normal border drawing, so the button stops looking like a normal button and takes whatever shape you set. I don’t think you can completely simulate the default border appearance (getting rid just of the transparent part that causes the margin-like phenomenon), but the following might take you sufficiently close (on supporting browsers):
input[type="submit"] {
border: solid gray 1px;
border-radius: 4px;
background: #ddd;
}
Demo: http://jsfiddle.net/m2CSy/