CSS条件页边距(仅CSS，没有JS)

Question

问题描述

我有这个(很常见的)问题。如果我浮动一个图像，我可以给它留边距，这样它就可以在图像周围加上一些空间。所以，如果我这么做：

​

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

​

当然，效果很好.只要图像位于元素的顶部。但如果我把它加在正文的中间，就会发生这样的事情：

​

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

​

以防万一，问题是：

​

​

因为它有margin:0，所以图像上面没有空格。显然，我可以添加margin:15px并成为一个快乐的露营者，但是当它是第一个元素时，我会在图像上方有一个15 be的空间。

我试过使用.alignleft:not(:first-line)，但是它没有工作，甚至没有在p标记中添加图像，所以我没有想法

问题

所以，基本上，我的问题是:是否有可能使这些边距以有条件的方式运行？

Answer 1

根据您的HTML，仅当margin-top: 15px是p的子级(或后续兄弟)时才应用p。

​

.alignleft {
  float: left;
  margin: 0px 15px 15px 0;
}

p > .alignleft {
  margin-top: 15px;
}

/* if the img is a following sibling, try this:

  p ~ .alignleft { margin-top: 15px }

*/

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>


<hr>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

​

Answer 2

这边试试！

​

p img {
  float: left;
  margin: 15px 15px 15px 0px;
}

img {
  float: left;
  margin: 0px 15px 15px 0px;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

​