There are two approaches to centering a column <div> in Bootstrap 3: Approach 1 (offsets): The first approach uses Bootstrap’s own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a … Read more
This is one of the most well-known examples of authors misunderstanding how :first-child works. Introduced in CSS2, the :first-child pseudo-class represents the very first child of its parent. That’s it. There’s a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the … Read more
#container { width: 100px; height: 100px; position: relative; } #navi, #infoi { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #infoi { z-index: 10; } <div id=”container”> <div id=”navi”>a</div> <div id=”infoi”> <img src=”https://appharbor.com/assets/images/stackoverflow-logo.png” height=”20″ width=”32″ />b </div> </div> I would suggest learning about position: relative and child elements with position: absolute.
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Since this answer has become rather popular, I’m rewriting it significantly. Let’s not forget the actual question that was asked: How to remove the space between inline-block elements? I was hoping for a CSS … Read more
To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would … Read more
Short answer: you can’t. Long answer: you shouldn’t. Give it a class name or an id and use stylesheets to apply the style. :hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn’t any inline-style equivalent (as it isn’t defining the selection criteria). Response to the OP’s comments: See … Read more
Flexbox doesn’t have collapsing margins. Flexbox doesn’t have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use) Therefore achieving what you are asking for is a bit more difficult. In my experience, the “cleanest” way that doesn’t use :first-child/:last-child and works without any modification on … Read more
You can check directly at the CSS grammar. Basically1, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 be a letter or underscore, and the … Read more
Just create a wrapper <div> with a percentage value for padding-bottom, like this: .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh – 16px); } div { width: 100%; padding-bottom: 75%; background: gold; /** <– For the demo **/ } <div class=”demoWrapper”> <div></div> </div> It … Read more
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the … Read more