I have just noticed some wired spacing below a textarea, it is different in every browser. Can someone explain why it is there?
span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
}
<textarea></textarea>
<span>test</span>
Add
vertical-align:bottom
This is because
The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
MDN Reference
span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
vertical-align: bottom;
}
<textarea></textarea>
<span>test</span>
add this style to textarea
vertical-align: top
Add vertical-align: top to textarea.
The reason for the gap is that textarea is an inline (or inline-block) element, and the gap is the space reserved for descenders in text.
span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
}
textarea{
vertical-align:top;
}
<textarea></textarea>
<span>test</span>
The thing with textarea in HTML is that the text is aligned right next to the bottom margin. If you wish to have it any other way, read about the vertical-align attribute in CSS.
You can use:
span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
vertical-align: middle;
}
<textarea></textarea>
<span>test</span>
Related
UPDATE:
I think the best solution is one mentioned by Timothy Lee. In essence, add vertical-align: top to the <div> tag.
A label, an input, and a div walk into a bar...
These elements all have the following styles:
box-sizing: border-box;
height: 40px;
line-height: 40px;
The div has a border and contains an anchor tag. The goal is to line the div and the input border, but it seems the div is 1px higher than the input.
See codepen for example
https://codepen.io/gosusheep/pen/PEQLOp
Thoughts on how to remedy this? I've mostly been messing around with margins and paddings and styling the anchor tag, but haven't found a solution.
Thanks for your time.
Edit:
P.S.
I've spent a good amount of time googling and looking on stackoverflow for solutions (that's where I found the "line-height" explanation), but still can't solve it.
Edit2:
HTML:
<div class="my-container">
<label for="text">Label</label>
<input type="text" id="text" />
<div class="my-link">
suh dud
</div>
</div>
CSS:
.my-container {
margin: 1rem;
}
input, label {
box-sizing: border-box;
height: 40px;
}
.my-link {
height: 40px;
display: inline-block;
box-sizing: border-box;
border: 1px black solid;
line-height: 40px;
vertical-align: top;
}
.my-link > a {
line-height: 40px;
}
The easiest way, you can remove the div
<div class="my-container">
<label for="text">Label</label>
<input type="text" id="text" />
<a class="my-link" href="#">suh dud</a>
</div>
and add vertical-align
.my-link {
vertical-align:top;
height: 40px;
display: inline-block;
box-sizing: border-box;
border: 1px black solid;
line-height: 40px;}
because the input element has inset border and your button has solid border, in second one, the solid element make a external border.
Here two differents options for border-box >>>
border: 1px solid #000;
border: 1px inset #000;
I have one div inside that i have one label. But I am getting some space above the div. I can't remove that space any how.
Don't know what happens there.
Question: Why I am getting that space above div? How can I remove that space?
My code:
For display issue proper I had put color and border.
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>
I have tried many things but, didn't get any solution.
label is a inline element therefore add display:inline-block/block or vertical-align:top
* {
padding: 0;
margin: 0;
}
div {
font-size: 0;
/* fix inline-block gap - not needed when using block only*/
background: red
}
label {
border: 1px solid black;
font-size: 10px;
}
.l1 {
display: inline-block
}
.l2 {
display: block;
width: 9%
}
.l3 {
vertical-align: top;
}
<div>
<label class="l1">Some text</label>
</div>
<div>
<label class="l2">Some text 2</label>
</div>
<div>
<label class="l3">Some text 3</label>
</div>
Try to add vertical-align: top; for your label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
vertical-align: top;
border: 1px solid black;
font-size: 10px;
}
<div>
<label>Some text</label>
</div>
This behaviour is caused because the div element has a browser-dependent default size applied to it. When it contains an element with a smaller font-size, the contained element will be placed on the baseline of the div which results in the space. To solve it, add a matching font size to the div:
div {
font-size: 10px;
}
It is coming because of the default line-height of the labels. You need to use reset.css or similar (like normalize.css) to clear the browsers default styling.
Here are some helpful reference, download and simply add them above your style sheet.
http://meyerweb.com/eric/tools/css/reset/reset.css
or
https://necolas.github.io/normalize.css/3.0.3/normalize.css
Looks like the line-height in the div is too high.
This does the trick:
div {
line-height: 10px;
}
(Of course you should reference the div with a class or id).
Inline element like span also behaves the same.
Add a float:left for the label
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
label {
border: 1px solid black;
font-size: 10px;
float: left;
}
<div>
<label>Some text</label>
</div>
I want to put a colorful outline around a bunch of inline elements. Is there any easy way to make this look right within the flow of the text?
Here's the HTML:
<span>Text Before</span>
<div class="border">
<div>This</div>
<div>is</div>
<div>not</div>
<div>a</div>
<div>public</div>
<div>service</div>
<div>announcement.</div>
</div>
<span>Text After</span>
Here's the CSS:
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}
Screenshot with .border display: inline:
Screenshot with .border display: inline-block:
I want it to look roughly like this (accomplished with a mixture of manual line height, padding, and relative positioning... ugh!):
Basically, inline-block elements do everything right, but they don't break apart between lines as would inline elements. But inline elements collapse their height and have to be manually adjusted. Is there really no way around this?
Try adding a line-height on container div.
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
font-size: 30px;
}
.border > div {
display: inline-block;
margin-bottom: 15px;
background-color: lavender;
}
This is a cop-out answer on my part, but It Works™, at least for my purposes, so I'm using it until something better comes up.
If you're willing to commit the relatively minor crime of putting a span around the content of each inner div and setting the text style for the span instead of the div, you can make each of the divs an inline-block, give the background and border style to each individual div instead of the parent div, set the left/right margin of each div, to 0, and extend the borders of the divs via padding to make it seem like one continuous background rect. If you want an outline, you can use the nth-item selectors and set the borders accordingly.
Here's the revised HTML (also compressed onto one line, to get rid of the spaces between inline-block elements):
<span>Text Before</span>
<div class="border">
<div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div>
</div>
<span>Text After</span>
And here's the revised CSS:
.border {
display: inline;
word-spacing: 0;
}
.border > div {
display: inline-block;
vertical-align: middle;
background-color: pink;
padding: 5px;
margin: 2px 0 2px 0;
border-top-style: solid;
border-bottom-style: solid;
}
.border > div:nth-child(1) {
border-left-style: solid;
}
.border > div:last-child {
border-right-style: solid;
}
.border > div > span {
background-color: lavender;
font-size: 30px;
vertical-align: middle;
}
And here's what it looks like:
This technique breaks down if you want something more complex than a background color with a border, but for my purposes, the benefits — those being far simpler CSS and mostly automatic layout — outweigh the cons.
I have a textarea, like this
<textarea rows="10" cols="50"></textarea>
In default the cursor will start from the top left of the textarea, But i want it to be started from vertical and horizontal center of textarea like text aligned to middle in a table-cell.
I have achieved horizontal center by applying text-align:center, But how to make it vertically center?
Something like this:
It should be like this if more text is entered.
I tried this CSS:
textarea {
vertical-align:middle;
text-align:center;
display:table-cell;
}
I cannot think of a way to do this with just <textarea> but I have a demo that almost works using a contenteditable <div>. From that article:
Browser support for contenteditable is surprisingly good
The only problem I see is when the text fills the vertical space the <div> expands. I cannot think of any way to stop this in CSS (and I tried many different properties!). It should be possible to intercept this in JavaScript and stop the <div> expanding.
HTML
<div contenteditable="true"></div>
CSS
div {
height:150px;
width:350px;
border:1px solid black;
vertical-align:middle;
text-align:center;
display:table-cell;
}
you have to following code for css.
<style>
textarea {
text-align:center;
padding:50px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
}
</style>
Ok, I fiddled around a bit, and came up with a solution immitating what you need, it is a div with a textarea inside:
HTML
<div id="expandedText">
<textarea></textarea>
</div>
CSS
div#expandedText {
width: 250px;
height: 50px;
background-color: #fff;
padding: 50px 10px 40px 10px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
}
div#expandedText > textarea {
width: 250px;
height: 50px;
overflow: hidden;
text-align: center;
resize: none;
outline: 0;
border: 0;
}
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}