删除宽度以百分比给出的 div 的边距答案

【问题标题】：Remove margin for the div for which width is given in percentage删除宽度以百分比给出的 div 的边距
【发布时间】：2017-11-10 23:52:39
【问题描述】：

在 React JS 的样式化组件中，我以百分比形式给出了 div 的宽度以使其具有响应性...... 但是 div 在右边得到边距，这使得对齐受到干扰。如何摆脱这个边缘。

export const BannerHeaderText = styled.h1`
    width: 46.5%;
    height: 64px; 
    font-size: 28px;
    font-weight: 600;
    line-height: 1.14;
    `
export const BannerParagraph = styled.p`
    width: 51.4%;
    height: 40px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: #000000;
    opacity: 0.38;
    `

我得到了我需要的宽度。

<BannerParagraphBlock>

                <BannerHeaderText>
                    Solveing the most common problems in marketing
                </BannerHeaderText>

                <BannerParagraph>
                    Exquisite codially mr happiness of neglected distrusts.
                    Boisterous impossible unaffected he me everything.
                </BannerParagraph>

                <SeeAllProductsButton>{message.SayEffectHomePageSeeAllProductsButton.value}</SeeAllProductsButton>

            </BannerParagraphBlock>

丢失的数据

BannerHeaderText 是 h1，BannerParagrap 是 p BannerParagraphBlock 是部分

【问题讨论】：

你试过在BannerHeaderText 上使用display: inline-block吗？

标签： css reactjs styled-components

【解决方案1】：

在 CSS 代码的开头重置<div> 标记的边距。然后稍后您可以根据需要提供边距。就是这个样子，

    div{
        margin:0;
        padding:0;
    }

希望这会奏效！

【讨论】：

抱歉，这些是 h1 和 p 标签，我之前已将边距和填充设置为零，但没有用

【解决方案2】：

HTML 标题是块级元素。来自MDN

块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。

在您的情况下，您可以这样做以使标题居中对齐

h1.heading {
    margin-right: auto;
    margin-left: auto;
}

您可以在下面的代码-sn-p 中看到标题（红色边框）是居中对齐的。

h1.heading {
  margin-right: auto;
  margin-left: auto;
  border: 1px solid red;
  width: 352px;
}

p {
  color: #777;
}

<h1 class="heading">Solving the most common problems in marketting</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

【讨论】：

它占据了整个部分，但宽度应该像预期的那样 352px 它占据了 757px

【解决方案3】：

使用flex 得到相同的结果

下面我贴了一个例子

flex的更多更新FLEX

.wrapper {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

.wrapper h1 {
  font-size: 19px;
  margin: 10px 0px;
  color: #fff;
  max-width: 352px;
  text-align: center;
}

.wrapper p {
  font-size: 14px;
  color: #f7f7f7;
  max-width: 352px;
  text-align: center;
}

.wrapper button {
  background: #7C6ECC;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  border: none;
  font-size: 14px;
}

<div class="wrapper">
  <h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, rem, neque rerum nemo nam dolor ea nihil
  </p>
  <button>
    See all products
  </button>
</div>

【讨论】：

【解决方案4】：

众所周知。 h1 是一个块级元素，所以它会占据最近的块级祖先的空间。对于块级元素，水平方向满足下式：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

默认margin、padding为0，border-style为none，所以border width也为0。因此，当你对h1应用一个特定的宽度时，方程可能不满足。当margin-right 被忽略并被计算以使等式成立时，这种情况称为“过度约束”。

If all of the above have a computed value other than 'auto', the values are 
said to be "over-constrained" and one of the used values will have to be 
different from its computed value. If the 'direction' property of the 
containing block has the value 'ltr', the specified value of 'margin-right' 
is ignored and the value is calculated so as to make the equality true. If 
the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

所以，h1是块级元素，没有办法去掉右边距；

如果只想h1居中，可以设置

h1 { 左边距：自动；边距右：自动； }

根据上面的公式，margin-left和margin-right会被计算为相同的值，所以h1可以这样居中；

如果您想将 h1 定位在任何位置，您可以将 margin-left 或 padding-left 添加到任意值以达到您的目的；
或者，您可以根据需要将 h1 从块级更改为内联块，这将真正移动右边距：

h1 {
  display: inline-block;
}

<body>
  <h1>Hello, title!</h1>
  <p>Hello, world!</p>
</body>

【讨论】：