Question

在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是部分

Answer 1

在CSS代码的开头重置 <div>标记的边距。然后您可以根据需要给出边距。这是它的样子，

    div{
        margin:0;
        padding:0;
    }

希望这会奏效！

Answer 2

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

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

在您的情况下，您可以执行此操作以使标题居中对齐

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用flex获取相同的

下面我发布了一个例子

flex FLEX

的更新更新

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

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

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

默认边距，填充为0，边框样式为无，因此边框宽度也为0.因此，当您将特定宽度应用于h1时，等式可能不满足。这种情况被称为过度约束＆＃34;当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：auto; margin-right：auto; }

根据上面的等式，margin-left和margin-right将被计算为相同的值，因此h1可以以这种方式居中;

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

＆＃13;

h1 {
  display: inline-block;
}

＆＃13;

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

＆＃13;

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

4 个答案: