I have a piece of text in a <h1> above a horizontal rule. The text does not line up exactly with the rule unless I apply margin-left: -4px to the <h1>. This seems a bit hacky to me. What is the correct way to line them up?
Example, the text is a few pixels to the right (dotted line added to highlight that the text and rule are not lined up):
Horizontal line starts at 0 whereas TEST starts at 4Px.
Code:
<h1 style="margin-left: -4px">TEST</h1> (without the -4 they do not line up)
<hr class="styledHorizontalRule" />
.styledHorizontalRule {
height: 1px;
width: 320px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 0px;
background-color:blue;
border: none;
outline: none;
}
As far as I can tell, it is a margin/padding issue. I didn't see the problem being replicated in the given example, but try this:
h1 { margin: 0px; padding: 0px; }
.styledHorizontalRule {
height: 1px;
width: 320px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 0px;
background-color: blue;
border: none;
outline: none;
}
<h1>TEST</h1>
<hr class="styledHorizontalRule" />
Related
I'm trying to make a simple button. But instead of <button>, I'm using <div> and <p>, but the result will show up as only border, and the text won't show up over the border.
Am I doing something wrong?
Screenshot of the button:
.Something4 {
margin-top: -72px;
margin-left: 335px;
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
margin-left: 335px;
width: 100px;
height: 50px;
}
<div onclick="location.href='Login.php';" style="cursor: pointer;" class="Something4">
<p2 style="font-family: Sans-serif;font-size:16px;font-style:normal;">Login</p2>
</div>
I copied your code into codepen.com.
margin-top: -72px; is moving your button off the screen.
The second margin-left: 335px; in the p2 section is moving the text out of your button.
Try removing all your margins and see how it looks:
.Something4 {
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
width: 100px;
height: 50px;
}
Keep in mind the margin inside the p2 tag will not replace the margin on the border itself, and having negative margins might not always do what you think.
I would highly recommend using semantic markup to describe the content of your page. This helps make your content accessible and work as expected across a variety of devices and use cases that you might not be capturing.
So use an anchor tag <a> to link to \login.php, and then you can choose to style that similar to a button if you'd like.
body {
padding: 15px;
background: #211f1f;
}
a.login-button {
color: salmon;
border: 1px solid salmon;
padding: 10px 15px;
border-radius: 20px;
text-decoration: none;
}
Login
I'm trying to implement the following design (For now I'm just worried about the text box):
When typing:
Maximum height:
Notice the top and bottom paddings were decreased.
Now, this is what I have so far:
.chat-wrapper {
width: 100%;
}
.message-text {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-text" contentEditable></div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
Now for the input text box, I have two solutions:
Using div with contentEditable attribute, it works and it is expandable to a certain height. But the text is not centered vertically (I'm trying to avoid using Flex, just to make sure old browsers are compatible, not very strict about that though)
Using textarea, it is more semantic IMHO, but it doesn't expand automatically.
I want also to detect the keypress event (I don't think it is a problem in both solutions).
Which solution do you think is the web standard? If both are good, how do make the div centers the text, and shrink the paddings when it grows? Or in the case of textarea, how do I make it expand without JS?
Also if you have any better suggestions, let me know.
UPDATE:
I just realized how messy is the option (div with contentEditable):
As you can see, first I can't wrap the text to lines when the text is more than the width.
Second, the text inside the div, is not clean ! Especially when copy-pasting. I need it to be pure text so when I use JS to get the content, I get just the text not the html tags.
I'm assuming that you want your padding preserved and it that case you could do something like this with contenteditable.
Add the wrapper around the .message-text:
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
</div>
Update CSS:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
Check the snippet:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
max-height: 145px for the .message-wrapper is actually the height of content box, and that helps with pushing the .message-text with padding from the top and bottom.
I hope I got the right idea of what you want to achieve,let me know if this helps.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I'm experiencing a strange behaviour with the HTML button tag. It seems that when I place two buttons side by side, they have a 4px gap between them appearing out of nowhere.
Here is a fiddle which shows the issue.
As you can see from the image below, FireBug shows that the gap is neither a margin or a padding (since a padding would be shown in purple).
As a note: I'm using the latest version of Firefox on Windows 8.1 and I tried also with the CSS Reset from Eric Mayer, but the gap is still there.
It's not a really important problem, but it would be nice to know if it's normal or not and what causes it.
The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:
Use font-size: 0 to parent container(you have to define font-size to child elements):
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
font-size: 0;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Another one is to use negative margin-left: -4px
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
margin-left: -4px;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Last but i don't like it at all is to use html comments as spacers
between gaps:
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
All above will work. Good luck :)
It's because you have whitespace between button elements. Change your HTML to:
Fiddle
<div class="buttons">
<button>Button1</button><button>Button2</button>
</div>
If you just want to display one line between these buttons, add margin: -1px.
Fiddle
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
margin: -1px;
cursor: pointer;
}
Additional Tweaks:
In Firefox, when you click on a button, it displays a weird dotted border like below:
Fiddle
To get rid of this, add this to your CSS:
button::-moz-focus-inner {
border: 0;
}
One more thing(Firefox): when you click on the button, the text moves. To prevent this add this to your CSS:
Fiddle
button:active {
padding: 0;
}
It can be corrected by
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
float:left;
}
As others have said, it is the whitespace between your elements. If you're using PHP, you could do something like this:
<div class="buttons">
<button>Button1</button><?php
?><button>Button2</button>
</div>
Otherwise, you could do this:
<div class="buttons">
<button>Button1</button><
button>Button2</button>
</div>
Or this, as suggested from the comments:
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
if you float: right; or float: left; you will see no space.
jsfiddle
take a look at this:
Here is my css:
<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
margin: 0px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>
Why are margins not working?
I want the "backups_header" to be flush with the top of the backups.
And they are, but the font probably doesn't fill its entire height. There is a bit of spacing around a the letters that make it look like a margin of about two pixels. If you select it, the highlight will reveil the actual line height.
There is no proper way to fix this, because it can be different for each font and even slightly differ on each machine (especially different OS'es), but your best bet would be to set a line-height and tweak it until it is just right.
The main reason is that you are again changing the margins below. write margin:0px above!
`<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
margin: 0px;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>`
Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}