The inline element display perfectly if I remove the border or I change the display to block or inline-block. I don't understand why I can't see the border.
html:
<div class="content">test test test</div>
css:
body{
padding: 0;
margin: 0;
}
.content {
display: inline;
background: palegreen;
border: 5px solid red;
}
http://jsfiddle.net/Kodam/h1c3r5u3/
Let me quote this answer:
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
But if top border would be taken into account, it would make your div vertically misaligned with the other elements on the same line, even though in your case there is only a single element on the line. However, top border is ignored, therefore it is "sticking out" of the body and you cannot see it.
As a "proof", try to modify your HTML code in the provided fiddle as:
<div style="line-height: 50px"><div class="content">test test test</div></div>
Then you'll be able to see the top border, as the height of parent element has enough space for it not to stick out.
Why not use display: inline-block ?
.content {
display: inline-block;
background: palegreen;
border: 5px solid red;
}
Related
This question already has answers here:
Why does display inline-block match height of text?
(2 answers)
Closed 2 years ago.
In Google Chrome only - when I have an <a> tag set to display block, when it receives focus it has an irregular outline shape. (see screenshot).
Irregular outline screenshot
Is this a bug in Chrome or is there some CSS that can cause this issue?
This issue doesn't occur only for <a> elements, it's all focusable elements that behave that way on Chrome. The element area is calculated differently for the actual CSS outline and the focus outline. Not sure the reason why, but the focus handles many functions, for example it can trigger a keyboard, text-to-speech for accessibility, etc. So maybe it needs to be handled differently.
The CSS box for block elements is calculated based on the defined height, width and position. So your element will have the outline defined, and if you have a visible overflow the border and outline don't necessarly match the actual content of the element.
For the focus outline, the text nodes in the element are taken into account in the calculation. The area that is outlined is the combination of the element box plus the text nodes boxes. It's more or less the element box plus the rectangles of the selection range.
In your example, i'm guessing you have a defined height that is less than the height of the text in the element, and so the focus outline has this shape. It takes the area of the text node inside your <a> element + the box of the element.
Best way to handle this would be to set the height to auto, or at least make it so that it encloses the text.
See examples of how the focus outline doesn't match CSS outline for block elements with some overflow:
let a = document.getElementById('a');
a.focus()
div {
display: block;
width: 190px;
height: auto;
font-size: 23px;
border: solid 1px green;
margin-top: 50px;
line-height: 60px;
box-sizing: content-box;
overflow-y: visible;
float: left;
}
#a {
height: auto;
}
#b {
height: 40px;
}
#c {
height: 0px;
}
span {
display: block;
}
<div id=a tabindex="1">
Click
<span>to</span>
focus
</div>
<div id=b tabindex="2">
Click
<span>to</span>
focus
</div>
<div id=c tabindex="3">
Click
<span>to</span>
focus
</div>
The essence of the problem is that the element has display: block with a fixed height and also a font-size which is higher than that block. The text is actually higher than the block model, so it overlaps. Below this is illustrated by giving the background a color.
document.getElementById('nc').focus();
#nc {
display: block;
background: rgb(200,200,200);
font-size: 20px;
height: 15px;
}
<a id='nc' href='#'>Normal content</a>
The chrome browser solves this by 'merging' the outline of both together. Hence the result.
So what to do. That depends on the situation. I can quickly think of 2 solutions, what one to use depends on your context:
#1 Change the height and padding of the block so the text fits
document.getElementById('nc_2').focus();
#nc_2 {
display: block;
background: rgb(200,200,200);
font-size: 20px;
padding: 10px;
height: 1em;
}
<a id='nc_2' href='#'>Normal content</a>
#2 Use display: inline-block instead
document.getElementById('nc_3').focus();
#nc_3 {
display: inline-block;
background: rgb(200,200,200);
font-size: 20px;
}
<a id='nc_3' href='#'>Normal content</a>
Solved this issue by setting <a> with display: inline-block instead of inline, then used margins to adjust.
Occurred when focus set on <a> below:
<a>
<img src="...">
<h1 class="sr-only">Go home!</h1>
</a>
it's not bug , it's built in Chrome and some browsers does the same.
maybe this solve your answer:
a:focus,a:active{
border : 0px!important;
outline : 0px!important;
}
In anchor tag by default outline property is there on focus so we can remove it with outline:none; on focus.so basically its not browser issue. you can try below css to resolve.
a{
display:block;
}
a:focus, a:active{
outline:none !important;
}
Remove outline from anchor
I have some text I want to be positioned inside a holder as follows:
[...........]
[.the]......]
[.[title]...]
[...........]
The holder needs to have a black background and I'd like the text to have a white background and black text. I am using the following structure:
<div class="holder">
<div class="title">
<span>The</span>
<span>Title</span>
</div>
</div>
I am not sure if it's correct or not, but I am using the <span>s over <p>s becuase the p was going full width of the holder whereas the width of the span sizes itself to the text itself.
I want each span on a new line and this is where it is breaking atm. Currently the spans just sit on the same line together. I tried adding a <br> after the first span but that doesn't fix it either, this time the second span is slightly below but positioned to the right.
The css I am using:
.holder {
width: 200px;
height: 300px;
}
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
You shouldn't use float for that.
Moreover, span was created to span text in the middle of the line.
Is that what you were trying to do: http://jsfiddle.net/Rhjtv/ ?
Try adding clear:both; to the style declarations for your spans.
If this does not solve your problem, than please build an example on http://www.jsfiddle.net so wie can better understand what's the problem.
If you want your line siting one after another you should use divs
just try removing float:left; from
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
separate the lines by using the css word-break
click here view the result
http://gucoders.com/css3/css_wordbreak.php
I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
I want to put padding on a css border. Pull it inside a div, away from the edge. Is this possible using css (css3 is fine, webkit).
Here is the design.
I did this by placing a div inside a div, then give a border to the inner div. I want to make the markup slim as posible so I want to use only one div if posible.
Thank you.
You should be able to do this with the CSS outline property:
<style>
.outer {
outline: 2px solid #CCC;
border: 1px solid #999;
background-color: #999;
}
</style>
<div class="outer">
example
</div>
Instead of borders, you may use outline property:
div{
height:300px;
width:500px;
background-color:lightblue;
outline:dashed;
outline-offset:-10px;
}
<div></div>
http://jsfiddle.net/H7KdA/
Padding around the border (which would separate it from the edge) is called the 'margin': for further details, see Box model.
Unfortunately, without adding another div, I don't think you can do this with just CSS.
The more complicated your design gets, the more likely you will need extraneous html tags.
Your other (also not great) option is an image background, or if it somehow makes you feel better, you can add elements client side with JQuery, thereby maintaining the "purity" of your server side files.
Best of luck.
You could do that by creating a inner div with the borders you want and a outer div with a display: table. Something like this:
<style>
.outer {
background: #ccc;
display: table;
width: 400px;
}
.inner {
border: 2px dashed #999;
height: 50px;
margin: 5px;
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
you can define a margin for the first child element based on the parent element selector. e.g.
.outer:first-child {
margin : 10px;
}
This way any element put inside the .outer will automatically have 10px margin.
If you want this to be applied to any direct child of the outer element use "> *" instead. e.g.
.outer > * {
margin : 10px;
}
No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.
Maybe if you post an example of what you're trying to do we can come up with alternate solutions?
-update-
Looking at your example I'm afraid it's still not possible, at least not with just one div. Im not a fan of divitis either, but the extra div probably is the best option in this case.
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.