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;
}
Related
This is my first question on stackoverflow, so please bear with me if I don't do everything correct. If I can format this better, please let me know.
I am working through the TOP 2nd CSS Margin/Padding exercises. I was able to get through the first one no problem, but I have a situation that I don't understand in the second task.
The goal was to manipulate the padding/margins to achieve a certain desired outcome. Below is the original HTML and the CSS original, followed by the solution. I've put a link to the .png of desired outcome at the bottom.
My question is specifically about the .card and .title elements.
Before the 8px padding was added to the .card element, the edge of the blue background inside the .title element when right up to the top edge of the box and were flush with the .card element. When I add 8px padding to the .card element, it seems to add it correctly to the left, right and bottom of everything, however the top of the .title element seems almost double in white space between the top of the blue box in the .title element and the top of the .card element.
This is fixed then by adding the margin-top: 0; in the .title element.
I'm having a very hard time conceptualizing why I need to add the margin-top of 0. I think I understand everything else. But why is everything flush without the padding, but when I add the 8px padding, it looks good on all sides except the top which appears double, necessitating the margin-top: 0; being inserted into the .title element
Does it have anything to do with an h1 margin having some extra margin to begin with? Again, this is my first run at CSS so I'm not sure if that is correct. If it does have something to do with the h1 margin, why am I only seeing it when I add the padding?
Perhaps I'm missing a super easy concept here, but it's doing my head in so any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
CSS Original + Solution
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-top: 0;
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<div class="card">
<h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
The reason for the phenomenon you're observing is a CSS "feature" called collapsing margins, which has been giving developers headaches for literally decades.
Let me show you a very simplified example of how it works.
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
}
<div class="outer">
<div class="inner"></div>
</div>
So this does what we're expecting it to do: It shows the orange div.inner right inside the green div.outer, at the very top of div.outer.
So what if we want to move the div.inner like let's say 20px down inside div.outer?
Let's try what seems intuitive: .inner { margin-top: 20px; }
.outer {
background-color: green;
height: 250px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Now instead of moving down div.inner inside div.outer, the whole div.outer has moved, with the div.inner still at the very same position relative to div.outer.
Huh???
This is where collapsing margins kick in. In certain conditions, if a parent with a margin-top (0 by default for div) has a child that has a margin-top (like in your code the h1 has), both margins collapse, meaning whichever element has the greater margin is applied to the parent element, not the child.
This only applies as long as the parent element has no padding-top set. Simply setting that to 1px stops margins from collapsing:
.outer {
background-color: green;
height: 250px;
/* stops collapsing margins: */
padding-top: 1px;
}
.inner {
background-color: orange;
height: 100px;
/* let's move it down 20px */
margin-top: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
What is going on is described at MDN for three different basic cases, this one applying here:
No content separating parent and descendants
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
You are correct, h1 has an inherent margin associated with it. I believe in chrome it is 0.67em. You can demonstrate this property by simply changing the h1 in <h1 class="title">I'm a card</h1> to a div and you can see how there's no margin anymore when you apply this.
Below in this example all I did was remove the margin-top: 0; from .title and switched h1 to divand you can see there no margin anymore
body {
background: #eee;
font-family: sans-serif;
}
.card {
width: 400px;
background: #fff;
margin: 16px auto;
}
.title {
background: #e3f4ff;
}
.content {
background: #e3f4ff;
}
.button-container {
background: #e3f4ff;
}
button {
background: white;
border: 1px solid #eee;
}
/* SOLUTION */
/* disclaimer: duplicating the selectors here isn't best practice.
In your solution you probably put it right inside the existing selectors,
which _is_ the best practice.
We separated it out here to make it extra clear what has changed. */
.card {
padding: 8px;
}
.title {
margin-bottom: 8px;
font-size: 16px;
padding: 8px;
}
.content {
margin-bottom: 8px;
padding: 16px 8px;
}
.button-container {
text-align: center;
padding: 8px;
}
button {
display: block;
margin: 0 auto;
padding: 8px 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<div class="card">
<div class="title">I'm a card</div>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div>
</div>
</body>
</html>
You're absolutely right about the margin on the h1 tag. Browsers add default styling to most HTML elements. It varies slightly between browsers, but in Chrome by default an h1 tag has about 0.67em of margin above and beneath it.
These default stylings are included to aid legibility of HTML documents that don't have any CSS applied – but they can all be overridden.
A really handy feature to take advantage of when you're writing CSS is your browser's 'Inspect element' feature: If you right click on your h1 tag in your browser and click 'Inspect element` in the menu that appears, you can see both the styling you've applied and the browser's default styling, referred to as the 'user agent stylesheet.'
If you hover over an element you can see how its padding and margin are affecting its layout.
You can see Chrome by default adds a margin-block-start and margin-block-end to the h1 tag by default. It's worth asking why it doesn't just use margin-top and margin-bottom, but the margin-block property covers off text that isn't oriented from left to right, or is rotated. Either way, setting your own margin-top and margin-bottom will override it, as you've done.
#connexo has described the collapsing margins phenomenon, which of course adds even more to ponder. This Medium article provides a little more context on why it occurs, using paragraphs as an example.
How do I not only keep this text centered but have the parallelogram border wrap around h1? I'm still very new to web design....I started with adding the shape I needed, making the color the same as the background, and simply adding the border. But applying it to h1 screws up the entire layout! (not centered) Also I haven't tinkered with it's sizing because it doesn't sit on the page correctly.
:root {
background: #dcd0ff;
}
h1 {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1{
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
}
<h1 id="shape1">
Sarra's Homemade Kombucha!
</h1>
<style>
:root {
background: #dcd0ff;
}
#shape1 {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
text-align: center;
}
h1 {
font-size: 1em;
}
</style>
<div id="shape1">
<h1>Sarra's Homemade Kombucha!</h1>
</div>
Here's how I would do it. I find it easier to use <div>'s when dealing with shapes like this. They're meant to be containers for other elements, which is exactly what you're trying to do here.
You had some css syntax errors. And it's best practice to wrap text with a tag (I used <span>) in the below example.
EDIT: set margin-right/left to auto to center the h1. More info on margin alignment here ------> CSS Margin.
And #dvfleet413 is right as well. You should really use a div for something like this (containers and such) and then put your h1 inside that div.
The JavaScript is not needed. This is just a test template I always use. Will remove
Comments added.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
root {
background: #dcd0ff;
}
/* you were missing a closing bracket here*/
div {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1 {
/*only set width on container*/
width: 40%;
padding: 30px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
/*set margin-left/right to auto to center*/
margin-right: auto;
margin-left: auto;
}
#shape1 span {
/*set height/width of span*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="shape1">
<span>Sarra's Homemade Kombucha!</span>
</div>
</body>
</html>
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 am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="header">
<h2>Hi</h2>
</div>
</body>
</html>
Here is my CSS file:
#header {
background-color: blue;
position: relative;
top: 5px;
border: 2px solid black;
}
h2 {
text-align: center;
font-size: 100px;
}
When I add the "border: 2px solid black;" line in the CSS, the #header div suddenly becomes really tall. How do I make it not do this? I've tried altering padding and height but it doesn't work.
Why does adding a border do this, and how do I change this? Thanks! First post on stackexchange so apologies if this is formatted incorrectly :)
Set the margin to 0 on the h2 element.
h2 {
text-align: center;
font-size: 100px;
margin: 0;
}
See it working here: http://jsfiddle.net/r2ykc/