I have div inside my button, however, the div doesn't stay inside the button.
Heres the link
https://gph.is/g/aNWBDdP
button {
font-size: 25px;
height: 40px;
min-width: auto;
padding: 5px;
text-align: left;
}
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
The div is inside the button, you just limited the Button's height. Remove the height and watch the button contain the div.
button {
display: block;
font-size: 25px;
padding: 5px;
text-align: left;
}
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
display: block;
font-size: 25px;
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
</body>
</html>
Per the comment of isherwood:
A block-level element has no business in a button. What's its
purpose here? Use a span instead and set it to inline-block if
necessary.
Related
I am using the Bootstrap Icons. However, I have one problem: The icon font works by appying a ::before selector to an i element. But while an icon with a font size of 24 pixels is exactly 24 by 24 pixels, the i element has some extra space on the bottom, and I cannot find a way to fix this.
Here is an example with a red border. You can inspect the element to see that the selector itself has the right size, but the element not.
body {
display: flex;
justify-content: center;
}
i {
font-size: 24px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.6.1/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-plus-circle"></i>
</body>
</html>
If you inspect the DOM, you'll see that the <i> has a height of 28px while the icon itself is only 24px.
To ensure the element is the same height, I'd just add a height property, the same as the icon, for example:
i {
font-size: 24px;
height: 24px;
border: 1px solid red;
}
body {
display: flex;
justify-content: center;
}
i {
font-size: 24px;
height: 24px;
border: 1px solid red;
}
.bi::before {
vertical-align: 0px !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.6.1/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-plus-circle"></i>
</body>
</html>
Since the Bootstraps adds the following css:
vertical-align: -.125em;
The icons won't be centert perfectly, we can remove that by adding
.bi::before {
vertical-align: 0px !important;
}
I have buttons inside a nav and the content of the buttons are overlapping, I wans't able to figure out what was causing it.
How can I prevent overlapping of the button contents?
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
width: 100px;
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me</button>
</nav>
</body>
</html>
You want to make sure you keep your line height >= your text size.
You have the line-height at 5px and the text size is going to be using the browser default which is ~14-16px.
Try setting your line height to 1.
button{
line-height: 1;
}
Explain to me why.... if the line height is not the issue, simply changing the line height to 1 exactly how I said fixes the issue of the text laying on top of each other, which is verbatum the question.
https://jsfiddle.net/rifi2k/nh9w80j6/
The proof is in the fiddle...
Although there is little reason to set a fixed height or width on the button, there may be a requirement to have a fixed width or height on your button, and setting a line height of 5px when you don't have an equal text height is not going to do you any favors down the road when those two words do end up stacking on top of each other, which is the case with a fixed width on that button.
So pretty much in my opinion the lesson to be learned from this example is not don't fix the width or height, its don't set a 5px line height when your text height is 16px... Anyone else care to disagree...
OVERLAPPING, not WRAPPING. overlapping is a line-height issue, wrapping is a fixed width issue
you need to define the height of your buttons with "height" instead of "margin"
you can see the fixed code here:
https://codepen.io/parisotdev/pen/qLoPbg
button {
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
height: 60px; /*this was margin: 30px*/
margin: 5px;
float: right;
The reason that the button content is overlapping is because you are using a fixed width of 100px. Since there's not enough of space for the contents, naturally it's forced to push the rest of the content to a new line.
What you can do here is to not use a fixed width and let the buttons decide for their own width.
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
/* width: 100px; */ /* COMMENTED THIS OUT */
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me As much text as needed</button>
</nav>
</body>
</html>
I think I got it just partly, now I have another problem I don't understand. I've got a div with id="signin" that is inside other 2 divs. Those 2 divs don't have any padding or border, and when I apply margin-top to the div with id="signin" now it doesn't create any white space above. Why is it? Can the div next to the div with id="signin" be affecting it in any way?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body {margin: 0px;}
#top-bar {
background-color: #690203;
height: 40px;
}
.fixed-width {
width: 950px;
margin: auto;
}
#logo {
float: left;
}
#logo img {
border-right: 2px solid #752124;
padding: 9px;
}
#signin {
float: left;
width: 200px;
margin-left: 15px;
margin-top: 10px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<div id="top-bar">
<div class="fixed-width">
<div id="logo">
<img src="images/logo.png" width="20">
</div>
<div id="signin">
<!--<img src="images/signin.png" width="13">-->
<span>test test</span>
</div>
</div>
</div>
</body>
</html>
I've started learning css recently and came across a problem I can't understand. I've got one div nested inside another, and when the outer div has a border, then using margin with inner div results in moving the inner div within the outer div, which is how I thought it should work. However, when the outer div doesn't have any border, then using margin with the inner div results in moving the outer div as well and it creates some space above it. Please, have a look and try to explain why it's like that. Thank you.
with border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
border: 1px dashed black; /* border I use or don't use with the outer div */
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
without border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
This is caused by the fact that CSS uses collapsing margins.
That link will explain it far better than I will, so I'd recommend giving that a read, but to give you a short summary:
Margin in CSS is designed to be displayed outside of an element. This behaviour gets a bit murky when dealing with elements within other elements, as the margin can be considered outside of the child in both cases of whether it is within the parent or outside of the parent. It was determined that margin's would always seek to be outside of all parent elements as well, unless that parent had a style which prevented this logic from being true. For example, if the parent has a border, it now has something above it which separates the child from the outside world, meaning that the child's margin must belong inside of the parent. If not, there is no separation, so the child's margin ventures outward.
If you wanted to always have the margin inside of the parent, a better option might be to apply padding to the parent element, instead of margin to the child.
Currently I just want a image link in a h2.
This link should be positioned bottom.
This is what I have:
<html>
<head>
<style>
body {
margin: 0;
}
h2 {
margin: 5px 0 10px;
background: #333333;
color: #f7f7f7;
line-height: 142%;
}
h2 a {
float: right;
}
h2 img {
vertical-align: bottom;
}
h2:after {
content:"";
height: 1px;
display: block;
clear: both;
}
</style>
</head>
<body>
<h2>Header <img src="http://placehold.it/26x26" /></h2>
</body>
</html>
But the strange thing is, that when I include this code in a .html file. I have an <a> tag of 26px height.
When I create a jsfiddle, the <a> tag is 34px and aligned bottom?!?!
HTML file
jsfiddle result
So, what is my mistake? I just want the image aligned at bottom...
Add a doctype before the html tag:
<!DOCTYPE html>
i'm having this problem where i cannot make the padding of a button constant with the column width. it is necessary for me because when a user is to hover onto the button, it changes background. but if i use a static value for the button padding width, it will get distorted once anyone zooms in our out two three levels. i tried to use the values as %, but to no avail. help will be much appreciated!
you may easily try out my code on ur own pc and see what i'm talking about:
html:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<!--<link rel="shortcut icon" href="#" />-->
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<center>
<div id="main">
<div id="header">
</div>
<div id="menupane">
<center>Home</center>
</div>
</div>
</center>
</body>
</html>
css:
#main
{
width: 80%;
height: 590px
}
#header
{
background-color: #1f3568;
height: 12%;
}
#menupane
{
background-color: #cfd3db;
height: 85%;
width: 8%;
float: left;
}
.buttons
{
color: #1f3568;
text-decoration: none;
margin-right: 0px;
line-height: 40px;
}
.buttons:hover
{
background-color: #677ba7;
}
thanks in advance
Add display:block to .buttons to fill the width of its parent
.buttons
{
display:block;
text-align:center; // removed CENTER element
color: #1f3568;
text-decoration: none;
margin-right: 0px;
line-height: 40px;
}
jsFiddle
This is what I would do. I would remove the and update my CSS. And like Don said that tag is deprecated. Update this on your page and let me know if this is what you want.
HTML Update:
<div id="menupane">
Home
</div>
CSS
#menupane
{
background-color: #cfd3db;
height: 85%;
width: 20%;
float: left;
}
a.buttons
{
display:block;
color: #1f3568;
text-decoration: none;
margin: 0px;
line-height: 40px;
}
a.buttons:hover
{
background-color: #677ba7;
}