This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
I have a "Read more" button on Section-e that acts weird: the margins are not responding except for left one.
GitHub Repo: https://github.com/CalogerN/Conquer
Live Preview: https://calogern.github.io/Conquer/
I tried debugging, but I found nothing.
.section-e__btn {
align-self: flex-start;
margin: 28px 0px 30px 20px;
padding: 15px 30px;
background-color: white;
font-family: "Open Sans";
}
<div class="section-e__column1">
Read more
</div>
Use display: block or display: inline-block to set margins on the <a> tag.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 1 year ago.
html,
body {
margin: 0;
padding: 0;
}
.tribute-header {
background-color: black;
color: white;
}
The above is my code and I am still seeing this space. Please refer to the image attached and the arrow shows the space I want to remove. Kindly help.
Add this to your code:
*{margin:0; padding:0; box-sizing: border-box;}
So the root of every element on your website will be as above.
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 1 year ago.
I'm trying to make a button perfectly curved using only less/css and html, but I can't figure out how to make it perfectly curved instead of that ugly html (my opinion) curve.
How I'm Doing It:
HTML
<div class = "scrollToTop">
<button>up top</button>
</div>
LESS/CSS
#fullred: #FF0000;
.scrollToTop button {
.scrollToTop a button {
scroll-behavior: smooth;
background-color: #fullred;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 7%;
margin: 1%;
}
}
What am I doing wrong?
Use same width and height values and then adjust the border-radius as per your smoothess taste.. perfered border-radius should be between 8-12%
Its easier to define border-radius in pixels. As explained here Border-radius in percentage (%) and pixels (px) or em defining border-radius in % might give unexpected results.
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
How to place div side by side
(7 answers)
Closed 2 years ago.
I'm trying to horizontally align two block elements and "display: inline-block" isn't working. I'm wondering if this is because I have unique margins set for each element. I don't understand CSS from a theoretical level. I will be adding a line to connect them visually once they're on the same horizontal line.
h2 {
padding: 75px;
margin-left: 30px;
font-family: 'Nunito Sans', sans-serif;
}
#cal {
font-family: 'Roboto', sans-serif;
border: solid;
border-radius: 25px;
padding: 10px;
margin-left: 350px;
margin-right: 250px;
}
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal. I'm 28 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about web design and SEO. I built this site to feature my work.</p>
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
HTML
<span class="symbol">$</span>
<span class="value">400</span>
This displays both "$" and "400" at the same level.
The moment I add
CSS
.symbol {
font-size: 2em;
}
then, "400" is pushed down.
Question: Why is "400/.value" affected by changes to "$/.symbol" ?
Thanks.
http://codepen.io/anon/pen/emLLrm
This question realistically is about vertically aligning, and can be solved using
vertical-align:middle
or
vertical-align:top;
to override the default baseline (which by default is set to the bottom).
Demo:
.symbol {
font-size: 2em;
vertical-align:middle;
}
<span class="symbol">$</span>
<span class="value">400</span>
In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:
.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}