个人中心
gpt4 book ai didi

Difference between typing two elements tags on the same line in editor and using new line to make them in spearate lines (inline-block) elements [duplicate](在编辑器中的同一行上键入两个元素标记与使用换行符使它们成为分隔行(行内块)元素[复制]之间的区别)

翻译 作者：bug小助手 更新时间：2023-10-26 21:43:42 24 4
gpt4 key购买 nike




I noticed a strange behavior when I made a block element like <p> to an inline-block.

当我将一个块元素(如

)设置为内联块时，我注意到一个奇怪的行为。


CSS

CSS


div {
    background-color: #4832d5;
    width: 500px;
}

p {
    background-color: #ccf281;
    display: inline-block;
    width: 50%;
}


The first case:

第一种情况：


<div>
  <p>First</p>
  <p>Second</p>
</div>

In this one the First

在这一次，第一次

element causing the Second to shift to the next line

元素导致第二行移动到下一行。


First case output

第一例输出


The second case:

第二种情况：


<div>
  <p>First</p><p>Second</p>
</div>

In this case the two elements are on the same line in the editor with no space between them, also making the two elements beside each other in the box.

在本例中，这两个元素在编辑器中的同一行上，它们之间没有空格，这也使得这两个元素在框中紧挨着。


Second case output

第二个案例输出


My question here is how typing them on the same line in editor change their behavior because as I know the browser rendering the extra whitespace

我这里的问题是如何在编辑器中的同一行上键入它们会改变它们的行为，因为我知道浏览器会呈现额外的空格


I tried it with other block elemetns by making them inline-block and get the same output

我对其他块元素进行了尝试，将它们设置为内联块，并获得相同的输出


更多回答

I don't have enough time right now to write an answer, but to summarise - the whitespace inbetween the elements is pushing the second element onto the next line as if it was wrapping. if the total width is 500px and each <p> element is 250px wide, that means it'll need to accommodate a space in-between which is, let's say, 4px wide - this exceeds the 500px of its container so it wraps

我现在没有足够的时间来写答案，但总而言之-元素之间的空格正在将第二个元素推到下一行，就像它是在换行一样。如果总宽度为500px，而每个

元素的宽度为250px，这意味着它将需要容纳一个空间--比如说，4px宽--这超过了其容器的500px，因此它将进行包装

css-tricks.com/fighting-the-space-between-inline-block-elements might be helpful

Css-tricks.com/fighting-the-space-between-inline-block-elements可能会有帮助

优秀答案推荐

in the first case parent contains 2 elements each 50% width - it can place them on one line.

在第一种情况下，父元素包含2个元素，每个元素都有50%的宽度--它可以将它们放在一行中。


in the second case there is a space between two <p> and thus there is no space for two 50% elements and a space. to prevent that you could add a comment instead of a space

在第二种情况下，两个

之间有一个空格，因此没有空间容纳两个50%的元素和一个空格。为了防止出现这种情况，您可以添加注释而不是空格


</p><!-- html comment
--><p>

or (rarely applicable, but would still work) by making parent font size (and thus space element size) 0.

或(很少适用，但仍然有效)，方法是将父字体大小(以及空格元素大小)设为0。


div {
  font-size: 0;
}

p {
 font-size: 16px;
}


I would use css-grid in your case to make equal elements

在您的情况下，我会使用css-grid来生成相等的元素


div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

or if you like flexbox more

或者如果你更喜欢flexbox


div {
  display: flex;
}

p {
  flex: 1 1 0; // 1 flex-grow to grow them equally, 1 for flex-srink (doesn't matter in this case) and 0 for start size from which elements will grow or shrink depending on the available space
}


更多回答

24 4 0
文章推荐： Rust cw_storage_plus - how do I satisfy Serialize, DeserializeOwned, and Deserialize<'de> in my struct?(Rust cw_storage_plus -如何在结构体中满足Serialize、SerializeOwned和Serialize <$'de>？)
文章推荐： Go type constraint that describes mutable struct behavior(描述可变结构行为的GO类型约束)
文章推荐： Extra arguments at position(位置处的额外参数)
文章推荐： Is there a best practice to avoid Django's "Found another file with the destination path" during collectstatic on production?(有没有一种最佳实践可以避免Django在生产的集合静态过程中“找到另一个带有目标路径的文件”？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com