Is there a way to limit the width of an "a" element? I'm using "a" elements as toggle buttons, but the blank space to the right of the "a" element remains of the pointer cursor style, which I do not want. Here's some code:
HTML:
<a class="ChartLink" id="CapstoneLink"> Global Leadership </a>
CSS:
.ChartLink, a {
padding: 10px;
cursor: pointer; }
All of the white space to the left of the text remains of the pointer cursor. How do I limit the length of the text to just the text?
As you commented, I guess what you need is margin and not padding, because padding is counted inside the element whereas margin is counted outside. Learn CSS Box Model and you will get the concept.
Demo
.ChartLink, a {
margin: 10px;
cursor: pointer;
}
Well, your question explains something different, and your provided markup is different so I assume that you are nesting div element inside a as if it's just a than the white space won't be there as it's an inline element by default.. And since div is a block level element by default you need to make it inline.
Demo
a.ChartLink div {
display: inline;
}
What you are doing
What you want to
Though we are making div element inline here, it would be more preferable to use span instead.
Related
Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing
<span>Color me</span>
span {
line-height: 52px;
background: red;
font-size: 14px;
}
Why it does not color complete box (i.e complete line-height)?
But When I do the same with div it colors as required.
<div>Color me</div>
div {
line-height: 52px;
background: red;
font-size: 14px;
}
In this particular case you need to add the following:
span {
display: inline-block;
/* ... */
}
As for the reason why, see this StackOverflow answer.
Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.
The method to convert the inline element to block element is
span{display: inline-block;}
Because line-height doesn't work on inline element. span is an inline element. You may add display: block or inline block to span's css
On replaced inline elements such as buttons or other input element, line-height has no effect.
For more information, see line-height#Mozilla
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
The actual answer to this problem while keeping span elements as inline is to use the padding attribute.
https://stackoverflow.com/a/56781081/1011956
I have this HTML
<span class="captionsection">Notes: <span class="grey">Lot behind chain-link fence was trimmed and well-maintained.</span></span>
And this css
.captionsection {
padding-top: 5px;
padding-left: 5px;
}
I thought that the inner span would inherit the padding of the outer span .captionsection? But this is not the case. CSS padding keeps inheriting
How can I fix this?
Child elements do not inherit padding from parent elements.
This doesn't work as expected because <span> is an inline element. Padding is not applied "in the middle" of its content, which includes the position the text wraps around.
If you wanted to keep the left padding for the whole height of the content in your example, you should have used a block element such as <div> for .captionsection.
Example fiddle
I should also mention that padding is not inherited (with the CSS meaning of the word "inherited") by child elements as you say -- but even if it were, you still would not have gotten the expected left padding after the wrap because of the above.
First of all, paddings are not inherited. But this is not the thing you mean, I believe, but that the second line is not indented.
A <span> is, by default, inline. This means it will be first layout as one line and then, if necessary, split to lines.
Here, the padding is only added to the first line because of this.
To make it work, you'll have to make the outer span a block or inline-block with the display property.
Use display: block; Otherwise, span won't inherit the padding.
CSS:
.captionsection {
padding-top: 5px;
padding-left: 5px;
display: block;
}
Fiddle:
http://jsfiddle.net/JmV85/
I'm writing the following HTML markup:
<span> Some Text
<div id="ch">татата</div>
</span>
and styles:
span{
border: 1px solid black;
text-align:center;
width: 300px;
height: 300px;
background: aqua;
}
#ch{
width:100px;
height:100px
background: yellow;
}
jsFiddle
Why is the height property not applied to a div element which inside the span, but width is applied?
Why is the right border of my span is missing?
Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )
Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!
Answer 2 : add display:block to span to change the default behavior
working fiddle with correct markup
fiddle with the layout you wanted
span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text
your fiddle demo
Because you are missing a semicolon after height: 100px <- this ; is missing in you css file
span is an inline element so it will not take notice of your height and width. For this you need to give it either:
display:block; or display: inline-block
First answer: You forgot the semi-colon after height style, that's why it is not rendered.
Second answer: If you look closely, the border appears after the div. This is because you
are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.
It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.
By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width.
We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.
span is an inline-element, while div ist not. you should consider swapping them..
Here is my JsFiddle
When I inspect the size of the anchor tags with Chrome developer tools it shows me 144px*18px for the 1st element and 310px*18px for the 2nd element.
I want to know why it does not take the height and width of the containing element and how it is being calculated.
.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px solid black;
}
.wide {
height: 160px;
width: 280px;
border: 5px solid black;
}
<div class="gallery">
<img class="normal" src="">
<img class="wide" src="">
</div>
The CSS 2.1 spec says
The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details.
The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.
For height, the spec says:
10.6.1 Inline, non-replaced elements
The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how.
So 18px is arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.
For width, the spec says
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
in other words, the width is determined by the <a> element's contents, paddings, borders and margins.
For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px
For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px
Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a> element and at the end of the second <a> element are being dropped. The spaces at the end of the first <a> element and the start of the second <a> element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a> element, so that's why a space participates in the width of the first <a> element but not in the width of the second one.
use display:inline-block in anchor
.gallery a{
display:inline-block;
}
here is updated jsFiddle File
also remove margin from image and add it to anchor
.gallery a{
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
anchor is always display: inline by default. To make anchor took it's child space, you must give him a display:block, or in this case, display:inline-block so that they will be inlineand block.
a{
display:inline-block;
}
JSFiddle
Read this question for more info.
The a tag's need to be styled as well
I added
.gallery a {
display: inline-block;
}
I had the same issue, for example, I have HTML generated by GitHub flavored markdown, so I can have paragraphs containing anchor with images inside.
Actually setting display: inline-block in anchors did not work for me; I did also set display: block in images. Using Sass nested something it looks like this:
.gallery {
a {
display: inline-block;
img {
display: block;
}
}
}
Instead of applying {display: inline-block} on <a>
, try applying {float: left} on the child of <a>. The height of the <a> would now match the height of the child.
Another solution is to use a negative margin-bottom attribute with the img element (the size depends on the font, so, it's better to be sure of the used font by using an #font rule, 0.2em was fine for the font I use, moreover, using em units is a good idea as the size depends on the font, so, if you change the font-size later, you won't have to change this CSS code):
HTML:
Something, <img src="whatever.png" alt="Whatever" />, something else.
CSS:
a:link {
display: inline-block;
}
img {
margin-bottom: -0.2em;
}
That way, all the texts are well aligned with the image, whatever it's in a link or not, I've done that to have all image + text blocks displayed the same way, but you might use a > img instead of just img in the above code.
By the way, I came up with this solution because I had something like:
a[something]:link::after {
content=" something to add"
}
so, the img {display: block;} was not an option for me as the “ something to add” would have been under the image and the rest of the text after, this would have cut the reading flow.
Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.
If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?
http://jsfiddle.net/NkXUW/4/
<div>
<ul>
<li><a>srikanth</a>
</li>
<li><a>sunkist</a>
</li>
<li><a>sunday</a>
</li>
</ul>
</div>
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
ul {
list-style-type:none;
}
ul li {
display:inline-block;
}
a {
background-color:#c34567;
padding:10px 10px 10px 10px;
}
What are coding practices that we need to consider to over come this problem.?
Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?
the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).
that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.
So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.
Use display:inline-block;
a {
background-color: #C34567;
display: inline-block;
padding: 10px;
}
SEE DEMO
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
http://www.w3schools.com/cssref/pr_class_display.asp
Can be solved without making any change in a tag. Just add overflow: hidden; property to div element.
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
overflow: hidden; /*expends its height if not fixed*/
}
Updated fiddle here: http://jsfiddle.net/NkXUW/52/
You must do add display: block; to <a> element to expand parent as you need.
See this fiddle
about different between margin and padding please read this maybe it help you
I don't think this is correct float your div wrapper
working demo
div {
float:left;
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
hope this help you..