This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
Consider the following HTML
<div class="buttons">
<button>Left</button>
<button>Middle</button>
<button>Right</button>
</div>
I can see spacing between buttons, which I understand is due to the CR/LF between each button markup.
Is there a way to correct this with CSS?
Yes, there are 2 ways:
First Way:
Set the html markup side by side
<div class="buttons">
<button>Left</button><button>Middle</button><button>Right</button>
</div>
Second Way
Set float:left in the buttons
button{
float:left;
display: inline-block;
}
Related
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 1 year ago.
I have a div and I don't want another div to show IF it held within.
My question is, how do I make
<div class="xp-row xp-first-row">
<div class="social-buttons">
Some Content Here
</div>
</div>
But if the div called "social-buttons" is standalone then it will not be hidden...
I was thinking something like this would work:
.xp-row xp-first-row .social-buttons{
visibility:none
}
But I couldn't get that to work - any ideas?
Thanks for all help
Rule .xp-row.xp-first-row should be declared without spaces as it is placed within one div:
.xp-row.xp-first-row .social-buttons {
visibility: hidden;
}
An example:
.xp-row.xp-first-row .social-buttons{
visibility: hidden;
}
<div class="xp-row xp-first-row">
<div class="social-buttons">
Some Content Here
</div>
</div>
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
CSS - Border where only half of a border is visible
(5 answers)
Closed 4 years ago.
How would I be able to achieve this decoration style look in a full width container? I want it to be positioned left of the start of the text, with a maximum width.
<div>
<h2 style="margin-bottom: 0; position: relative;display: inline;" >
BLOG
<div style="width: 20px;border: 2px solid red;position: absolute;">
</div>
</h2>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm trying to create 2 simple divs, one of 80vw and the other of 20vw to create two divs side by side.
For some reason this doesn't work:
<div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
<div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
Fiddle: https://jsfiddle.net/4hvrz4o1/
Switch to flexbox model:
<div style="display:flex">
<div style="background:black; height:100vh; width:50vw; display:inline-block;">50vw</div>
<div style="background:red; height:100vh; width:50vw;display:inline-block;">50vw</div>
</div>
The original browser layout madness has a method to it, you just have to remember it. Personally, I find the the flexbox model more often aligns with my "way of thinking" about layout, so I use it more often. Here's a cheat sheet to common use cases, esp. the side-by-side case.
Add a parent element with width:100vw and child element as width:50%
Here is updated fiddle : https://jsfiddle.net/4hvrz4o1/2/
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I want to display the toggle_embed class only if the a element has has-embed class. Is there any way I can solve this using CSS?
<div class="comment HAS_EMBEDDED">
<div class="toggle_embed">Embedded content</div>
<a class="has-embed">#name</a>
<a>Text</a>
</div>
NO. There's no previous selector in css. So, you can't do this just with css, you may use jQuery for this.
But if you want to use pure css solution then what about changing the markup like below?
<div class="comment HAS_EMBEDDED">
<a class="has-embed">#name</a>
<div class="toggle_embed">Embedded content</div>
<a>Text</a>
</div>
Then you can use css like this:
.toggle_embed{
display: none;
}
.has-embed + .toggle_embed{
display: block;
}
Note: Changing the markup, you may have to re-work for your layout.
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>