overflow

I'm certain this has been asked before in some form or other, but I just can't find an answer.. I have some nested divs <div class="parent"> <div class="child">A</div> </div> And the child has display:inline-block and overflow:hidden .parent{ background-color:red; } .child{ background-color:green; display:inline-block; overflow:hidden; } And it gets rendered like this: You can notice that the parent is 5px higher than the child. Where does the extra height come from? Here is the sample: http://jsfiddle.net/w8dfU/ Edit: I don't want to remove display:inline-block or overflow:hidden, this is a

I am trying to make two divs, one inside the other. The inner div is larger than the outer div, the outer div has overflow:scroll , and the inner div has margin:25px . So I do this: #outer { width: 200px; height: 100px; overflow: scroll; } #inner { width: 400px; height: 200px; margin: 25px; } ... <div id="outer"> <div id="inner"> </div> </div> Instead of the inner div having a margin of 25px all the way around as expected, there is a 25px margin on THREE sides, but on the right side there is none. This is extremely counter-intuitive in my opinion. If I add a middle div with a width large

I want to have one <div> with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width. html, body {margin: 0; padding: 0;} #myWorkContent{ width:530px; height:210px; border: 13px solid #bed5cd; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } #myWorkContent a { display: inline-block; vertical-align: middle; } #myWorkContent img {border: 0;} <div id="myWorkContent"> <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a> <a href=

When I specify text-align:center for an element with a width that is greater than the width of the text, the text is centered within the content box of the element (as expected). When I specify text-align:center for an element with a width that is less than the width of the text, the text is aligned to the left edge of the content box and overflows the right edge of the content box. You can see the two cases in action here . Can any CSS magic make the text equally overflow both the left edge and the right edge of the content box, so that it stays centered? I know this question is old, but I

See http://jsfiddle.net/mpx7os95/14/ The behavior is the desired behavior, which allows the center column in a 3 column layout to take up all the space available AND still allow the text inside of it to overflow into ellipsis when shrunk far enough. This seems to work due to max-width: 0 , but why does it produce this effect? What's so special about max-width: 0 in this case? .row { width: 100%; display: table; } .col { position: relative; min-height: 1px; border: 1px #000 solid; display: table-cell; } .x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; max-width:

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding; <div class="foo">helloworld</div> .foo { float: left; overflow: hidden; background: red; padding-right: 10px; width: 50px; border: 1px solid green; } The text overflows it's 50px size and into the 10px padding. Is that by design? If so it seems pretty dumb - padding isn't padding if it's got stuff in it! Or am I just doing something wrong? Regards, CSS newbie. This is the correct behavior. overflow: hidden will clip content that extends

目录 1. 继承性 2. css中的权重 3. 常用格式化排版 4. 浮动布局float 1. 继承性 继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green; 2. css中的权重 继承来的属性权重值约为0 权重比较规则: 如果选中了标签： 1.数选择器数量： id 类 标签 ，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 3.同是继承来的属性 1.谁描述的近，谁的优先级越高 2.描述的一样近，这个时候才回归到数选择器的数量 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级 注意：!important要写在分号的前面 使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。 3. 常用格式化排版 3.1 字体属性 1.字体 语法： /*网页中的文字设置字体为微软雅黑*/ body{font-family:"Microsoft Yahei"} 2.备选字体 语法： body{font-family:

demo地址： https://github.com/XieTongXue/how-to/tree/master/vertical-toggle 需求分析： 如图，有很多高度不固定的模块（图中只显示两个，本人项目有十三个），点击模块标题展开相应的模块，再次点击此模块匿藏，如何实现此需求并实现复用？ 点击红框前： 点击后： 难点分析: 模块高度不固定。 解决方案： 1、实现一个函数式组件 本人命名为vertical-toggle.js // Created by xiaoqiang on 17/04/2018. const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out' const Transition = { 'before-enter' (el) { el.style.transition = elTransition if (!el.dataset) el.dataset = {} el.dataset.oldPaddingTop = el.style.paddingTop el.dataset.oldPaddingBottom = el.style.paddingBottom el.style.height = 0

Vue 实现展开折叠效果 效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185 另一个 vue 圆形进度条组件解析 上述链接中，大佬给除了解决方法，再次进行总结，方便以后使用。 除了使用jQuery的方式实现上述效果，同样可以在Vue实现，下面是解决办法： 1、创建collapse.js文件 const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out"; const Transition = { "before-enter"(el) { el.style.transition = elTransition; if (!el.dataset) el.dataset = {}; el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingBottom = el.style.paddingBottom; el.style.height = 0; el.style.paddingTop = 0; el.style.paddingBottom = 0; }, enter(el)