This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I have 2 page blocks each made of 3 spans. One span is containing 2 other spans. What I am trying to achieve is to get rid of the gap between these 2 blocks. Have a look at the example. The margins and paddings are set to zero.
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</body>
</html>
It's the "line descenders space", where the down part of p, g or j goes. Span in "inline" element, so it is placed "in the line" as if they where letters. The inline-block also is "inline", just change "where" it is placed on the line: Vertical align is "baseline" as default for inline elements, try vertical-align:bottom
You can also deal with line-heigth:0 (so there is no descenders space) or display:block and "float"
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
vertical-align:bottom;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</body>
</html>
You are using display: inline-block, which preserves the whitespace/descenders between the blocks. Add an outer wrapper and set the font-size to 0, this negates the white space (you then have to reset the font size on wrapper),e.g.
.wrapper {
display: inline-block;
background-color: grey;
padding: 25px;
width: 50%;
font-size: 1rem;
}
.olive {
display: block;
height:50px;
line-height: 50px;
padding: 0px;
margin: 0px;
float: left;
background-color: olive;
}
.blue {
display: block;
height:50px;
line-height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
float: right;
background-color: #BCDBEA;
text-align: center;
border-radius: 50%;
cursor: default;
}
.outer-wrapper {
font-size: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-wrapper">
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
<span class="wrapper">
<span class="olive">The box with some text</span>
<span class="blue">?</span>
</span>
</div>
</body>
</html>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
So basically there is a padding on the top and bottom I want to remove. I tried with line heights but it didn't work. How do I do that?
display:inline-block first then you can play with line-height
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
<span class="close">×</span>
This works without extra padding when selected:
.close {
font-size: 50px;
background-color: red;
float: left;
line-height: 30px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
.close::selection{
background: none;
color: yellow;
}
<span class="close">×</span>
What you are looking for is ::selection property of CSS. You can write custom CSS within this and your selected element will behave the same.
Below is a header block I created, with a title stacked atop a 'navbar'. If you look at the code, you'll see an <h1> tag that's wrapping two (2) tags, and their contents — its fundamental (or essential) structure looks something like this:
<h1>
<div>
<!-- Nested <span> tags -->
</div>
<div>
<!-- Nested <span> tags -->
</div>
</h1>
The Issue
The issue is that when the view port is shrunk (which happens on mobile devices, obviously) the elements wrap in all crazy sorts of ways. The way it wraps, seems to be contingent on the view-port size, but nevertheless; it always wraps in a way that is most undesirable.
How can I make it wrap so that when the screen shrinks to the point where it has to wrap, the entire second word OPINIONS wraps, instead of just pinions or bstract?
#import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap');
:root {
--red-alpha: #7C000D;
--red-beta: #9C0810;
--charcoal: #060912;
}
body {
background-color: #555;
}
#head-alpha {
display: block;
background-color: #808080;
border: 2.5px ridge #500C12;
width: 90vw;
height: 18%;
padding: 2.5px;
display: block;
margin: 0 auto;
top: 0;
}
#head-beta {
display: block;
background-color: #808080;
border: 1px solid #400;
width: 400px;
height: 18%;
padding: 2.5px;
display: block;
margin: 0 auto;
top: 0;
}
.xxl-a {
color: var(--red-alpha);
font-family: 'Cinzel', serif;
font-size: 55px;
margin-right: -3px
}
.xxl-b {
color: var(--charcoal);
font-family: 'Cinzel', serif;
font-size: 55px;
margin-left: -4px;
}
.nav {
display: block;
width: auto;
border: 1.25px solid #88040C;
height: 32px;
background: #101218;
margin: 0;
padding: 6px 16px;
top: 0;
position: sticky;
position: -webkit-sticky;
color: var(--red-beta);
font-weight: 500;
}
.lrg-fg {
font-size: 20px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>SOLO</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<h1 id="head-alpha">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
<span id="span_0" class="xxl-b"> </span>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<span class="lrg-fg">HOME • </span>
<span class="lrg-fg">BLOG • </span>
<span class="lrg-fg">UPDATES</span>
</div>
</h1>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<h1 id="head-beta">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
<span id="span_0" class="xxl-b"> </span>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<span class="lrg-fg">HOME • </span>
<span class="lrg-fg">BLOG • </span>
<span class="lrg-fg">UPDATES</span>
</div>
</h1>
</body>
</html>
The selector ::first-letter does exist, which should help you do this much more simply. You can just use a single span then. Usage is along the lines of
#span-1::first-letter {
color: var(—A);
}
PS, the best practice for CSS is to not use IDs in selectors. Those tend to be left alone so the JavaScript can use them, and instead classes tend to be used.
You could wrap all your "Abstract" and all your "Opinions" elements in a container and then wrap those in another container. Now you can apply display: flex and easily change the flex-direction when the screen width changes.
Use a div for Abstract and Opinions. Also declare a viewport in the head section. Use height 100% on html & body to make space for the #head height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SOLO</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cardo|Cinzel&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="head">
<div>
<span id="span_1" class="xxl-a">A</span>
<span id="span_2" class="xxl-b">bstract</span>
</div>
<div>
<span id="span_3" class="xxl-a">O</span>
<span id="span_4" class="xxl-b">pinions</span>
</div>
<div class="nav">
<p>Hello World!</p>
</div>
</div>
Use the flex-wrap to wrap the span's
:root {
--A: #800;
--B: #090909;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
height: 100%;
-webkit-text-size-adjust: 100%;
}
body {
height: 100%;
margin: 0;
font: 400 1rem/1.5 'Cinzel', serif;
background-color: #555;
}
#head {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 18%;
padding: 2px;
background-color: #aaa;
border: 1px solid #400;
}
.xxl-a {
display: inline-block;
padding: 0 3px;
color: var(--A);
font-family: 'Cinzel', serif;
font-size: 55px;
}
.xxl-b {
display: inline-block;
padding: 0 3px;
color: var(--B);
font-family: 'Cinzel', serif;
font-size: 55px;
}
div.nav {
width: 100%;
height: 50px;
position: -webkit-sticky;
position: sticky;
top: 0; left: 0;
border: 1px double #A00;
background-color: #444;
}
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I have a bootstrap collapsible panel set up to expand and collapse a search bar. This works fine with no styling but when styling is added, it has a mind of its own. It looks like the styling is getting In the way of the collapsing transition. Then it just stops working.
Here is the code with the styling attached to this. I want this to be clickable on an a href link.
#search-dropdown-div {
width: 100%;
padding: 10px;
display: inline-block;
background-color: transparent;
}
#center {
margin: 0 auto;
width: 1000px;
position: relative;
}
#center form {
position: relative;
}
#center form input[type="search"] {
width: 100% !important;
padding: 16px !important;
border-radius: 10px;
border-style: none;
font-size: 20px;
letter-spacing: 1px;
}
#center form input[type="submit"] {
background-color: #3A83F3;
width: 100px;
padding: 16px;
margin-left: -100px;
border-style: none;
border-radius: 5px;
color: white;
position: absolute;
top: 4px;
right: 4px;
float: right;
letter-spacing: 1px;
}
#center form input[type="submit"]:hover {
background-color: #0D5C9E;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Bootstrap Collapse Training</title>
</head>
<body>
<a class="mag-search" data-toggle="collapse" href="#search-dropdown-div"><i class="fa fa-search" aria-hidden="true"></i>Search</a>
<div id="search-dropdown-div" class="collapse">
<div id="center">
<form role="search">
<input class="fontAwesome" type="submit" value="Search  " />
<input class="fontAwesome" type="search" placeholder=" Search our website..." />
</form>
</div>
</div>
</body>
From what I tested with your code, I think it's the display: inline-block of #search-dropdown-div that causes problem.
Can you tell me if it works if you remove this line ?