In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html
Related
I am just learning some more about displays and floats, and noticed that when I apply a float left to all display types, they then all behave like a display: inline-block.
This is a jsfiddle without the float left:
https://jsfiddle.net/j3jjpaxr/
And here is one with the float left:
https://jsfiddle.net/xhhbgsu1/
CSS:
.first {
background-color: #435671;
}
.second {
background-color: #135671;
}
.third {
background-color: #935671;
}
.inlineblock {
display: inline-block;
}
.inline {
display: inline;
}
.block {
display:block;
}
.testDiv {
text-align: center;
float:left;
width: 33%;
height: 100px;
}
Can anyone explain why this happens, I would have expected the inline elements to at least keep their size?
For inline elements the width is ignored (MDN: "An inline element occupies only the space bounded by the tags that define the inline element.")
Also from MDN:
As float implies the use of the block layout, it modifies the computed
value of the display values in some cases:
Specified value: inline
Computed value: block
...
Thins means that when you set a float to an inline element, it's display value is forced to block. That's why you get the effect you described in your question.
https://developer.mozilla.org/it/docs/Web/CSS/float
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
It is not behaving like inline-block.
inline-block elements have a default spacing between them. Check your first fiddle.
float makes it behave like block element, which floats either left or right.
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Src: https://developer.mozilla.org/en-US/docs/Web/CSS/float
This simply means that an element, inline or block, behaves like a inline block but without the white space an inline element has.
I want to center picutes in a span. The span has the class centerMe but it doesn't affect the pictures.
Markup of centerMe:
.region.region-footer .centerMe{
text-align: center;
}
You can find this example on JSFiddle.
Thanks for any help
It is not happening because span is an inline element.
text-align:center does not affect it because total width of images and width of span is exactly same. If you give it 100% width, then only you will see the difference.
Also, width property will not work on inline element so change it to block or inline-block.
Add width to the markup:
.centerMe {
width:100%;
display:inline-block;
}
Updated fiddle here.
Another solution is to use any block element like div,p or section rather than using span.
You can't use text-align: that way on inline elements.
If you want to achieve that, you will have to change your span into i.e. a <p> element, which is a block.
The span itself doesn't have full width, so there is no space to center the images in.
You can solve this by changing the span into a div.
Or you can make it behave like a div by adding display: block to the CSS:
.centerMe{
display: block;
text-align: center;
}
Alternatively, you can give it width: 100%, like Hiral suggested but then you will have to take any borders, padding and margin into account as well. By making it behave like a block element, it will automatically occupy the available space, and I think it is a more flexible solution.
I want to change the margin between the label and input of a simple HTML form. The labels are below the input fields. When I set a class I can change other properties like font-size but not margin.
A <label> is displayed as inline by default. You have to change that to inline-block or block in order to set the margin.
label {
display: inline-block;
margin: 10px;
}
Some resources to learn more about the CSS box model:
MDN article
CSS-Tricks article
Some resources to learn more about the display attribute in CSS:
MDN article
you can't set margin top and bottom for , because tag is called as inline element, if u need to set margin top or bottom,then change to block element like below codes
label {
margin: 10px 0px;
display: block;
}
or
label {
margin: 10px 0px;
float: left;
}
If you add css "Float:left" for any element , then tat will changed as block element
Think of spans and text to be inline. In-line elements must be turned block in order to use a margin. Also making it block means if the label is too big it can push content down.
I'm new in CSS, and I've got one question. I'd like to make a good simple form, and there is the following code:
<form>
<div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div>
<div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div>
</form>
Some CSS code:
label {
float: left;
width: 230px;
text-align: right;
margin: 5px;
}
.row {
clear: left;
}
I copied and pasted this code from some book. I understand floating, clearing, but I don't understand why does "width" attribute work with label (because it inline element) and, in this case, why doesn't "width" work without "float"? Please, make me clear. Thanks
The Label element is defaulted to inline display mode.
Inline elements don't accept a width property, they will be rendered in the width of their content.
Floated elements on the other hand, are like inline-blocks. they will accept a width property.
By applying a float property to an element you are essentially changing it's display property to something like (but not exactly) inline-block.
label is inline element so it doesn't accept the width. To accept the width of any element it should be either inline-block or block element. And by setting float to any element behaves like this is an inline-block element and also another info for you position absolute or fixed also thinks as it is a block level element.
If you want to make label accept the width you should define label as inline-block.
label {
/*float: left;*/
display: inline-block;
width: 230px;
text-align: right;
margin: 5px;
}
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.