I had a bug-like issue with a div inside a 'a' tag.
<a href=''>
<div>..</div>
</a>
this <a> tag was inside a flex parent.
for some reason this <a> added a padding to the div(from right only). Padding wasn't shown in google chrome developer tools. But after trying many things I accidently tried the autosuggestion display: contents.
This removed that padding.
What is this display: contents do?
What does it do to <a> tag?
display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
Source: https://caniuse.com/css-display-contents
Related
In this example The div with id parent is not being scaled to the appropriate height. This is fixed when the last element in the parent div with the class c_b is styled with clear:both. However, if ONLY the <a> tag with the class link is styled with clear:both nothing happens. I am wondering why clear:both appears to work correctly if the last element is a div but doesn't work for link elements.
Thanks
a is an inline tag and a div is a block.
add display: block as css to the a tag.
edit:
Since this is getting some upvotes here's how to add the css:
Add the css as style in the a tag:
My link
Or by adding it to a stylesheet linked from the <head> tag.
I'm very new to html and I was wondering if there is anything I can use other than a div element. The code that I want to use displays a hover. For example: <div id="cartpopup">.
Well this makes it so whatever I put in between these tags gets lowered. Everything is working fine I just don't want my image to be lowered because of div. Help would be appreciated.
To prevent line wrapping, try using a span element, which is inline.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You could also set a div to display inline or inline-block (which allows CSS sizing, for example) using CSS:
#cartpopup {display: inline-block;}
Just a basic question.
I have an anchor tag like this,
<div><a onclick="openModal();">Popup</a></div>
On click i am displaying a modal. Nothing problem in this. But, since the div is a block level element, wherever i am clicking within this div(Means till the end of the div), my modal is displaying. I need to restrict this action to be bound only on click on the text "Popup"
I know by giving a width to this div will certainly solve this issue. Is there any work around for this other than setting a static width to the div?
I tried giving display: inline-block to the anchor tag. But no clue.
Thanks,
There must be a css property display:block attached to that particular anchor tag. Can you provide us your code snippet along with css? A fiddle will work.
I suspect that your <a> tags are inheriting some styling from within you application. Usually display:block; or display: inline-block; which is causing them to take up the full width and height of their parent div
You should apply display: inline; to the elements where you only want the text to trigger the popup.
JSFiddle
I haven't been able to find anything that says what the default display is equivalent to in CSS's display properties. I ask, because whenever I attempt to add padding or margin to an <a> tag, it doesn't add it, I have to add the display property of inline-block for it to.
I don't know if this is browser specific or not, but would the default display of it be inline versus say inline-block (I obviously know it's not inline-block.
It is always display: inline by default. Horizontal margins, and padding on all sides should work without having to change its display property.
This remains true even in HTML5. If you are applying styles to an <a> element that contains flow elements or any other elements that are represented in CSS as display: block, you should set the <a> itself to a proper block container type such as block or inline-block for its layout to work as intended.
It's INLINE by default.
Inline-block is not supported in IE7.
margin is not supported in Inline element. and only left & right padding is supported in INLINE element.
I'm trying to create css buttons by using the following html markup:
Forgot password
But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.
You can preview the problem here btw, www.matkalenderen.no
Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.
What am I missing here?
As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
See PPK's writeup about it.
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.
Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.
Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.
I think the most proper solution is display: inline-block; which will allow you to set height for the element that still will be treated as inline element.